列表渲染
v-for
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
语法 (item,index) in items index可选配置项
v-for块中可访问所有data
v-for也可以对一个 对象 进行遍历 (key、index可选配置项)
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>
new Vue({
el: '#v-for-object',
data: {
object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
})
注意事项
在对数组进行操作push/pop/sort/reverse等时,dom会自动触发视图更新
但是item[index] = value; vm.items.length = 2
例外
因此vue提供了根据index更新value的方法
Vue.set(vm.items, indexOfItem, newValue)
vm.items.splice(indexOfItem, 1, newValue)
同样的对 对象属性的添加或删除也无法自动触发
//单个属性
Vue.set(object, key, value)
//多个属性
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
排序、过滤
排序、过滤本质其实是通过computed计算属性或methods方法来动态操作数组建立数组的副本,在不改变原数组的前提下实现排序、过滤
//computed
<li v-for="n in evenNumbers">{{ n }}</li>
data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
evenNumbers: function () {
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
}
//methods
<li v-for="n in even(numbers)">{{ n }}</li>
data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
even: function (numbers) {
return numbers.filter(function (number) {
return number % 2 === 0
})
}
}