html如何用v-for遍历,Vue中的v-for遍历循环

1. V-for和key属性

1. 便利数组，参数(item,index) in list

2. 便利对象，参数(value,key,index) in list

3. 便利数字，num in 10 (1~10)

4. key在使用v-for的时候都需要去设置key

4.1 让界面元素和数组里的每个记录进行绑定

4.2 key只能是字符串或者数字

4.3 key必须是唯一的

• {{item.name}}数组的下标索引值{{index}}

迭代对象

• 对象的键：{{key}}，对象的值：{{value}},数组的下标{{index}}

迭代数字

• 你好

v-for的key

add

• {{item.name}}数组的下标{{index}}

// 调度层

var vm = new Vue({

// vue控制的区域

el: '#app',

// data参数存放我们的数据，这一层就是mvvm里的model层

methods: {

add() {

// this.list.push({

// userId: 10,

// name: '新来的'

// })

this.list.unshift({

userId: 10,

name: '新来的'

})

}

},

data: {

message: 'Hello Vue!',

user: {

userId: 19,

name: '测试name',

age: 18

},

list: [{

id: 1,

name: '张三1'

},

{

id: 2,

name: '张三2'

},

{

id: 3,

name: '张三3'

},

{

id: 4,

name: '张三4'

},

{

id: 5,

name: '张三5'

}

]

}

})