10列表渲染
10.1用 v-for 把数组对应为元素
<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' }
]
}
})
访问父作用域的属性和当前项的索引。
<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' }
]
}
})
10.2在 v-for 里使用对象
new Vue({
el: '#v-for-object',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
})
<ul id="v-for-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
第二个的参数作为键名：
<div v-for="(value, name) in object">
{{ name }}: {{ value }}
</div>
第三个参数作为索引：
<div v-for="(value, name, index) in object">
{{ index }}. {{ name }}: {{ value }}
</div>
10.3维护状态
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性：
<div v-for="item in items" v-bind:key="item.id">
<!-- 内容 -->
</div>
10.4数组更新检测
变异方法 (mutation method)
Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
你可以打开控制台，然后对前面例子的 items 数组尝试调用变异方法。比如 example1.items.push({ message: 'Baz' })。
替换数组
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})
10.5对象变更检测注意事项
还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：
var vm = new Vue({
data: {
a: 1
}
})// `vm.a` 现在是响应式的
vm.b = 2// `vm.b` 不是响应式的
对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。例如，对于：
var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})
你可以添加一个新的 age 属性到嵌套的 userProfile 对象：
Vue.set(vm.userProfile, 'age', 27)
你还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名：
vm.$set(vm.userProfile, 'age', 27)
有时你可能需要为已有对象赋值多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：
Object.assign(vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
你应该这样做：
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
10.6显示过滤/排序后的结果
有时，我们想要显示一个数组经过过滤或排序后的版本，而不实际改变或重置原始数据。在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组。
例如：
<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 循环中) 你可以使用一个方法：
<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
})
}
}
10.7在 v-for 里使用值范围
v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。
<div>
<span v-for="n in 10">{{ n }} </span>
</div>
10.8在 <template> 上使用 v-for
类似于 v-if，你也可以利用带有 v-for 的 <template> 来循环渲染一段包含多个元素的内容。比如：
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider" role="presentation"></li>
</template>
</ul>
10.9 v-for 与 v-if 一同使用
注意我们不推荐在同一元素上使用 v-if 和 v-for。
当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用，如下：
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>
上面的代码将只渲染未完成的 todo。
而如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 <template>)上。如：
<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<p v-else>No todos left!</p>
10.10在组件上使用 v-for
在自定义组件上，你可以像在任何普通元素上一样使用 v-for 。
<my-component v-for="item in items" :key="item.id"></my-component>
然而，任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要使用 prop：
<my-component
v-for="(item, index) in items"
v-bind:item="item"
v-bind:index="index"
v-bind:key="item.id">
</my-component>
不自动将 item 注入到组件里的原因是，这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。
下面是一个简单的 todo 列表的完整例子：
<div id="todo-list-example">
<form v-on:submit.prevent="addNewTodo">
<label for="new-todo">Add a todo</label>
<input
v-model="newTodoText"
id="new-todo"
placeholder="E.g. Feed the cat"
>
<button>Add</button>
</form>
<ul>
<li
is="todo-item"
v-for="(todo, index) in todos"
v-bind:key="todo.id"
v-bind:title="todo.title"
v-on:remove="todos.splice(index, 1)"
></li>
</ul>
</div>
Vue.component('todo-item', {
template: '\
<li>\
{{ title }}\
<button v-on:click="$emit(\'remove\')">Remove</button>\
</li>\
',
props: ['title']
})
new Vue({
el: '#todo-list-example',
data: {
newTodoText: '',
todos: [
{
id: 1,
title: 'Do the dishes',
},
{
id: 2,
title: 'Take out the trash',
},
{
id: 3,
title: 'Mow the lawn'
}
],
nextTodoId: 4
},
methods: {
addNewTodo: function () {
this.todos.push({
id: this.nextTodoId++,
title: this.newTodoText
})
this.newTodoText = ''
}
}
})
完整代码：
10 列表渲染1.html
<!DOCTYPE html>
<html>
<head>
<title>列表渲染</title>
<script src="
https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
<script>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
</script>
</body>
</html>
10 列表渲染2.html
<!DOCTYPE html>
<html>
<head>
<title>列表渲染</title>
<script src="
https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<ul id="v-for-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
<br>
<div v-for="(value, name) in object">
{{ name }}: {{ value }}
</div>
<br>
<div v-for="(value, name, index) in object">
{{ index }}. {{ name }}: {{ value }}
</div>
</ul>
<script>
new Vue({
el: '#v-for-object',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
})
</script>
</body>
</html>
10 列表渲染3.html
<!DOCTYPE html>
<html>
<head>
<title>列表渲染</title>
<script src="
https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
id:<input type="text" v-model="id">
name:<input type="text" v-model="name">
<button @click="add">add</button>
<p v-for="item in items" v-bind:key="item.id">
<input type="checkbox">
{{item.id}} {{item.name}}
</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
id:"",
name:"",
items:[
{id:1, name:"zhangsan"},
{id:2, name:"lisi"}
]
},
methods: {
add(){
this.items.unshift({id:this.id, name:this.name})
}
}
})
</script>
</body>
</html>
10 列表渲染4.html
<!DOCTYPE html>
<html>
<head>
<title>列表渲染</title>
<script src="
https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-for="item in items">
{{item.message}}
</p>
<button @click="filter">filter</button>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
items:[
{message:"Foo"},
{message:"Bar"}
]
},
methods: {
filter(){
this.items = this.items.filter(function (item) {
return item.message.match(/Foo/)
})
}
}
})
</script>
</body>
</html>
10 列表渲染5.html
<!DOCTYPE html>
<html>
<head>
<title>列表渲染</title>
<script src="
https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-for="item in items">
{{item}}
</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
items: ['a', 'b', 'c']
}
})
// vm.items[1] = 'x' // 不是响应性的
// vm.items.length = 2 // 不是响应性的
// Vue.set
// Vue.set(vm.items, 1, 'x')
// Array.prototype.splice
// vm.items.splice(1, 1, 'x2')
// vm.$set(vm.items, 1, 'x3')
vm.items.splice(3)
</script>
</body>
</html>
10 列表渲染6.html
<!DOCTYPE html>
<html>
<head>
<title>列表渲染</title>
<script src="
https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{a}} {{b}}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
a: 1,
b: ''
}
})// `vm.a` 现在是响应式的
vm.b = 2// `vm.b` 不是响应式的
</script>
</body>
</html>
10 列表渲染7.html
<!DOCTYPE html>
<html>
<head>
<title>列表渲染</title>
<script src="
https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{userProfile.name}}<br>
{{userProfile.age}}<br>
{{userProfile.favoriteColor}}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
userProfile: {
name: 'DaQiang'
}
}
})
// Vue.set(vm.userProfile, 'age', 18)
// vm.$set(vm.userProfile, 'age', 18)
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 18,
favoriteColor: 'Green'
})
</script>
</body>
</html>
10 列表渲染8.html
<!DOCTYPE html>
<html>
<head>
<title>列表渲染</title>
<script src="
https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<li v-for="n in evenNumbers">{{ n }}</li>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
evenNumbers: function () {
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
}
})
</script>
</body>
</html>
10 列表渲染9.html
<!DOCTYPE html>
<html>
<head>
<title>列表渲染</title>
<script src="
https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<li v-for="n in even(numbers)">{{ n }}</li>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
even: function (numbers) {
return numbers.filter(function (number) {
return number % 2 === 0
})
}
}
})
</script>
</body>
</html>
10 列表渲染10.html
<!DOCTYPE html>
<html>
<head>
<title>列表渲染</title>
<script src="
https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span v-for="n in 10">{{ n }} </span>
</div>
<script>
var vm = new Vue({
el: "#app"
})
</script>
</body>
</html>
10 列表渲染11.html
<!DOCTYPE html>
<html>
<head>
<title>列表渲染</title>
<script src="
https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider" role="presentation">Hi</li>
</template>
</ul>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
items:[
{msg:"Hello"},
{msg:"World"}
]
}
})
</script>
</body>
</html>
10 列表渲染12.html
<!DOCTYPE html>
<html>
<head>
<title>列表渲染</title>
<script src="
https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo.name }}
</li>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
todos:[
{name: '张三', isComplete:false},
{name: '李四', isComplete:false}
]
}
})
</script>
</body>
</html>
10 列表渲染13.html
<!DOCTYPE html>
<html>
<head>
<title>列表渲染</title>
<script src="
https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo.name }}
</li>
</ul>
<p v-else>No todos left!</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
todos:[
{name: '张三'},
{name: '李四'}
]
}
})
</script>
</body>
</html>
10 列表渲染14.html
<!DOCTYPE html>
<html>
<head>
<title>列表渲染</title>
<script src="
https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="todo-list-example">
<form v-on:submit.prevent="addNewTodo">
<label for="new-todo">Add a todo</label>
<input
v-model="newTodoText"
id="new-todo"
placeholder="E.g. Feed the cat"
>
<button>Add</button>
</form>
<ul>
<li
is="todo-item"
v-for="(todo, index) in todos"
v-bind:key="todo.id"
v-bind:title="todo.title"
v-on:remove="todos.splice(index, 1)"
></li>
</ul>
</div>
<script>
Vue.component('todo-item', {
template: '\
<li>\
{{ title }}\
<button v-on:click="$emit(\'remove\')">Remove</button>\
</li>\
',
props: ['title']
})
new Vue({
el: '#todo-list-example',
data: {
newTodoText: '',
todos: [
{
id: 1,
title: 'Do the dishes',
},
{
id: 2,
title: 'Take out the trash',
},
{
id: 3,
title: 'Mow the lawn'
}
],
nextTodoId: 4
},
methods: {
addNewTodo: function () {
this.todos.push({
id: this.nextTodoId++,
title: this.newTodoText
})
this.newTodoText = ''
}
}
})
</script>
</body>
</html>
欢迎观看视频教程：https://ke.qq.com/course/432961?tuin=36914f34，如有疑问，请加QQ群665714453交流讨论。