循环结构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]