循环结构
循环结构
v-for遍历数组
<div :key="index" v-for="(item,index) in fruit">{{item}}</div>
<script src="../js/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { fruit: ['张三', '李四', '王五'] } }) </script>
<li :key="item.id" v-for="(item, index) in user" v-text="item.name + item.age"></li> <script src="../js/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { user: [{ id: 1, name: '张三', age: 17 },{ id: 2, name: '李四', age: 18 },{ id: 3, name: '王五', age: 19 }] } }) </script>
key的作用:帮助Vue区分不同的元素,从而提高性能
v-for遍历对象
<div v-for="(value, key, index) in obj" v-text="value + '--' + key + '--' + index"></div> <script src="../js/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { obj: { username: 'IKUN', age: 20, idol: 'KUN' } } })
v-if与v-for结合使用
<div v-if="value=='KUN'" v-for="(value, key, index) in obj" v-text="value + '--' + key + '--' + index"></div>