循环结构
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>
原文：https://www.cnblogs.com/Alisa-k/p/12633631.html