vue2中的列表渲染v-for

一、定义

⽤ v-for 指令基于⼀个数组来渲染⼀个列表。 v-for 指令需要使⽤ item in items 形式的特殊语法，其中 items 是源数据数组，⽽ item 则是被迭代的数组元素的别名。

二、 遍历数组

2.1 写法

<li v-for="(item,index) in list">{{item.name}}-{{index}}</li>

new Vue({
el: '#app',
data: {
	list: [{ name: '张三' }, { name: '李四' }, { name: '王五' }],
 },
});

2.2 第⼆个参数

<li v-for="(item,index) in list">{{item.name}}-{{index}}</li>

也可以⽤ of 替代 in

<li v-for="(item,index) of list">{{item.name}}-{{index}}</li>

三、遍历对象

3.1 写法

<li v-for="value in obj">{{value}}</li>

new Vue({
el: '#app',
data: {
	obj: { name: '张三', age: '18', sex: '男' },
 },
});

3.2 第⼆个参数（键名）

<li v-for="(name,value) in obj">{{name}}：{{value}}</li>

3.3 第三个参数（索引）

<li v-for="(name,value,index) in obj">{{index}}：{{name}}：{{value}}</li>