vue.js 列表渲染（vue 五）
用 v-for 把一个数组对应为一组元素
我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
结果：
在 v-for 块中，我们拥有对父作用域属性的完全访问权限。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' }
]
}
})
结果：
你也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法：
<div v-for="item of items"></div>
一个对象的 v-for
你也可以用 v-for 通过一个对象的属性来迭代。
<ul id="v-for-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
new Vue({
el: '#v-for-object',
data: {
object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
})
结果：
你也可以提供第二个的参数为键名：
<div v-for="(value, key) in object">
{{ key }}: {{ value }}
</div>
完成例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表渲染</title>
</head>
<body>
<h3>列表渲染</h3>
<ul id="example-1">
<li v-for="item in items">{{ item }}</li>
</ul>
<ul id="example-2">
<li v-for="(item, index) in items" :key="item.id">{{ parentMessage }} - {{ index
}} - {{ item.message }}</li>
</ul>
<ul id="v-for-object">
<li v-for="(value, key) in object">{{key}} -> {{ value }}</li>
</ul>
</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var example1 = new Vue({
el : '#example-1',
data : {
items : [ "pig", "dog", "cat" ]
}
})
var example2 = new Vue({
el : '#example-2',
data : {
parentMessage : 'Parent',
items : [ {
message : 'Foo',
id:1
}, {
message : 'Bar',
id:2
} ]
}
})
new Vue({
el : '#v-for-object',
data : {
object : {
firstName : 'John',
lastName : 'Doe',
age : 30
}
}
})
</script>
</html>
测试结果
数组更新检测
Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
你打开控制台，然后用前面例子的items数组调用变异方法：example1.items.push({ message: 'Baz' })。
替换数组
变异方法 (mutation method)，顾名思义，会改变被这些方法调用的原始数组。相比之下，也有非变异 (non-mutating method) 方法，例如：filter(), concat() 和 slice()。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})
显示过滤/排序结果
有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。
例如：
<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
})
}
}
一段取值范围的 v-for
v-for 也可以取整数。在这种情况下，它将重复多次模板。
<div>
<span v-for="n in 10">{{ n }} </span>
</div>
结果：
v-for on a <template>
类似于 v-if，你也可以利用带有 v-for 的<template> 渲染多个元素。比如：
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider" role="presentation"></li>
</template>
</ul>
完整例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表渲染</title>
</head>
<body>
<h3>列表渲染</h3>
<ul id="example-1">
<li v-for="item in items">{{ item }}</li>
<br />
<li v-for="n in evenNumbers">{{ n }}</li>
<div>
<span v-for="n in 10">{{ n }} </span>
</div>
<ul>
<template v-for="item in items">
<li>{{ item }}</li>
<li class="divider" role="presentation"></li>
</template>
</ul>
</ul>
</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var example1 = new Vue({
el : '#example-1',
data : {
items : [ "pig", "dog", "cat" ],
numbers : [ 1, 2, 3, 4, 5 ]
},
computed : {
evenNumbers : function() {
return this.numbers.filter(function(number) {
return number % 2 === 0
})
}
}
})
example1.items.push("panda");
</script>
</html>
测试结果