循环结构v-for
用于循环的数组里面的值可以是对象,也可以是普通元素
[mw_shl_code=applescript,true]<ul id="example-1">
<!-- 循环结构-遍历数组
item 是我们自己定义的一个名字 代表数组里面的每一项
items对应的是 data中的数组-->
<li v-for="item in items">
{{ item.message }}
</li>
</ul> <script> new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ],
} }) </script>[/mw_shl_code]
不推荐同时使用 v-if 和 v-for
当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。
[mw_shl_code=applescript,true]<!-- 循环结构-遍历对象
v 代表 对象的value
k 代表对象的 键
i 代表索引
--->
<div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>
<script> new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ], obj: { uname: 'zhangsan', age: 13, gender: 'female' } } }) </script>[/mw_shl_code] key 的作用 key来给每个节点做一个唯一标识 key的作用主要是为了高效的更新虚拟DOM [mw_shl_code=applescript,true]<ul> <li v-for="item in items" :key="item.id">...</li> </ul>[/mw_shl_code]