v-for
作用：v-for指令用于循环遍历显示一个数组或者对象 。
v-for嵌套
<div id="app">
<div class="movie" v-for="obj in movies">
<p>{{obj.name}}
</p>
<p>{{obj.year}}
</p>
<p>{{obj.dec}}
</p>
<p>
<span v-for="tag in obj.tag" v-text="tag"></span>
</p>
</div>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
movies: [{
name: "西西里的美丽传说",
year: 1992,
dec: "美丽无罪",
tag: ["人性", "战争", "伦理"]
}, {
name: "天使爱美丽",
year: 2001,
dec: "治愈向，拥抱全世界",
tag: ["爱情"]
}]
}
})
</script>
v-for为什么要加key
各位可以查看这个博主的博客https://www.jianshu.com/p/4bd5e745ce95vue的高度复用性所以我们可以增加Key可以标识组件的唯一性。
v-for中的参数
遍历数组
当只有一个参数时：
<p v-for="obj in arr">{{obj}}
</p>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
arr:['小猪','小明' ,'小红']
}
})
</script>
当两个参数时：
<p v-for="(obj,index) in arr">{{obj}}--{{index}}
</p>
第一参数为数组元素/第二参数为该数组元素下标 结果为小猪–0 小明–1 小红–2
遍历对象
当只有一个参数时：
<script type="text/javascript">
new Vue({
el: '#app',
data: {
arr:{
name:"小明",
age:18,
height:183
}
}
})
</script>
<p v-for='(obj,key,index) in arr'>{{obj}}--{{key}}--{{index}}
</p>
只有一个参数为内容有两个参数的情况 / 第一参数为内容 / 第二参数为键值Key有三个参数的情况 / 第一参数为内容 / 第二参数为键值Key / 第三参数为下标
结果为：小明--name--0
18--age--1
183--height--2
