vue2.0for点击事件

2017-03-01  本文已影响0人  zane626

以下是我自己的理解

第一种情况:数据是json格式

HTML:

  <ul>
    <li v-for="(item,index) in items"><!-- 这里可以使用in  也可以使用of -->
      <p>姓名:{{item.name}}</p>
      <p>年龄:{{item.age}}</p>
      <p>这是第几个:{{index}}</p>
    </li>
  </ul>

Js

 data () {
    return {
      items:[{"name":"张三","age":"18"},
            {"name":"李四","age":"17"},
            {"name":"王五","age":"19"}]
    }
  }

输出结果

姓名:张三
年龄:18
这是第几个:0
姓名:李四
年龄:17
这是第几个:1
姓名:王五
年龄:19
这是第几个:2

第二种情况:数据是数组

HTML:

  <ul>
    <li v-for="(value,key) in items">
        <p>内容:{{value}}key:{{key}}</p>
    </li>
  </ul>

JS:

 data () {
    return {
      items:[1,2,3,4,5,7]
    }
  }

输出结果

内容:1key:0
内容:2key:1
内容:3key:2
内容:4key:3
内容:5key:4
内容:7key:5

第三种情况:数据是{"key":"value"}

HTML:

 <ul>
    <li v-for="(value,key,index) in items">
        <p>value:{{value}}</p>
        <p>key:{{key}}</p>
        <p>index:{{index}}</p>
    </li>
  </ul>

JS:

 data () {
    return {
      items:{"a":"3","b":"1","c":"2","d":"4"}
    }
  }

输出结果:

value:3
key:a
index:0
value:1
key:b
index:1
value:2
key:c
index:2
value:4
key:d
index:3
上一篇 下一篇

猜你喜欢

热点阅读