循环结构
遍历数组
v-for
遍历数组<div id="app"> <div>图书列表</div> <ul> <li v-for="book in books"> {{book}} </li> <!-- 带有索引值遍历 --> <li v-for="(book, index) in books"> {{index + "->" +book}} </li> </ul> </div>
循环当中var vm = new Vue({ el: '#app', data: { books: ["天龙八部", "红楼梦", "西游记", "水浒传"] } });
book
为遍历项,index
为索引值,books
为数组,in
为关键字v-for
遍历复杂数组(数组中含有对象)<div id="app"> <div>图书列表</div> <ul> <li v-for="book in myBooks"> <span>{{book.ename}}</span> <span>-></span> <span>{{book.cname}}</span> </li> </ul> </div>
var vm = new Vue({ el: '#app', data: { myBooks: [{ ename: 'Tianlong eight', cname: '天龙八部' }, { ename: 'The Dream of Red Mansion', cname: '红楼梦' }, { ename: 'Journey to the West', cname: '西游记' }, { ename: 'Water Margin', cname: '水浒传' }] } });
- 为了提高性能,可以使用
key
关键字<li :key="index" v-for="(book, index) in myBooks"> <span>{{book.ename}}</span> <span>-></span> <span>{{book.cname}}</span> </li>
var vm = new Vue({ el: '#app', data: { myBooks: [{ ename: 'Tianlong eight', cname: '天龙八部' }, { ename: 'The Dream of Red Mansion', cname: '红楼梦' }, { ename: 'Journey to the West', cname: '西游记' }, { ename: 'Water Margin', cname: '水浒传' }] } });
key
关键字的作用:可以帮助Vue
区分不同元素,从而达到提高性能的目的。给key
赋的值在数组里必须是唯一的
遍历对象
v-for
遍历对象<div id="app"> <ul> <li v-for="(value, key, index) in obj"> {{ index + '->' + key + ': ' + value }} </li> </ul> </div>
遍历对象时,括号里必须有三个参数,分别是对象的值、键和索引,它们的顺序是固定的,命名却不是固定的var vm = new Vue({ el: '#app', data: { obj: { name: 'cmy', age: '21', gender: 'male' } }, });
v-if
和v-for
结合使用<div id="app"> <ul> <li v-if="value==21" v-for="(value, key, index) in obj"> {{ index + '->' + key + ': ' + value }} </li> </ul> </div>
var vm = new Vue({ el: '#app', data: { obj: { name: 'cmy', age: '21', gender: 'male' } }, });