Vue.js教程6-列表渲染
2017-01-17 16:41
756 查看
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' } ] } }) |
Foo
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' } ] } }) |
Parent - 0 - Foo
Parent - 1 - Bar
你也可以用
of替代
in作为分隔符,因为它是最接近 JavaScript 迭代器的语法:
<div v-for="item of items"></div> |
Template v-for
如同 v-if模板,你也可以用带有
v-for的
<template>标签来渲染多个元素块。例如:
<ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li class="divider"></li> </template> </ul> |
对象迭代 v-for
你也可以用 v-for通过一个对象的属性来迭代。
<ul id="repeat-object" class="demo"> <li v-for="value in object"> {{ value }} </li> </ul> |
new Vue({ el: '#repeat-object', data: { object: { FirstName: 'John', LastName: 'Doe', Age: 30 } } }) |
John
Doe
30
你也可以提供第二个的参数为键名:
<div v-for="(value, key) in object"> {{ key }} : {{ value }} </div> |
<div v-for="(value, key, index) in object"> {{ index }}. {{ key }} : {{ value }} </div> |
整数迭代 v-for
v-for也可以取整数。在这种情况下,它将重复多次模板。
<div> <span v-for="n in 10">{{ n }}</span> </div> |
1 2 3 4 5 6 7 8 9 10
组件 和 v-for
了解组件相关知识,查看 组件 。完全可以先跳过它,以后再回来查看。在自定义组件里,你可以像任何普通元素一样用
v-for。
<my-component v-for="item in items"></my-component> |
props:
<my-component v-for="(item, index) in items" v-bind:item="item" v-bind:index="index"> </my-component> |
item到组件里的原因是,因为这使得组件会紧密耦合到
v-for如何运作。在一些情况下,明确数据的来源可以使组件可重用。
下面是一个简单的 todo list 完整的例子:
<div id="todo-list-example"> <input v-model="newTodoText" v-on:keyup.enter="addNewTodo" placeholder="Add a todo" > <ul> <li is="todo-item" v-for="(todo, index) in todos" v-bind:title="todo" v-on:remove="todos.splice(index, 1)" ></li> </ul> </div> |
Vue.component('todo-item', { template: '\ <li>\ {{ title }}\ <button v-on:click="$emit(\'remove\')">X</button>\ </li>\ ', props: ['title'] }) new Vue({ el: '#todo-list-example', data: { newTodoText: '', todos: [ 'Do the dishes', 'Take out the trash', 'Mow the lawn' ] }, methods: { addNewTodo: function () { this.todos.push(this.newTodoText) this.newTodoText = '' } } }) |
Take out the trash
X
Mow the lawn X
key
当 Vue.js 用 v-for正在更新已渲染过的元素列表时,它默认用 “就地复用” 策略。如果数据项的顺序被改变,Vue将不是移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的
track-by="$index"。
这个默认的模式是有效的,但是只适用于不依赖子组件状态或临时 DOM 状态(例如:表单输入值)的列表渲染输出。
为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一
key属性。理想的
key值是每项都有唯一 id。这个特殊的属性相当于 Vue 1.x 的
track-by,但它的工作方式类似于一个属性,所以你需要用
v-bind来绑定动态值(在这里使用简写):
<div v-for="item in items" :key="item.id"> <!-- 内容 --> </div> |
v-for来提供
key,除非迭代 DOM 内容足够简单,或者你是故意要依赖于默认行为来获得性能提升。
因为它是 Vue 识别节点的一个通用机制,
key并不特别与
v-for关联,key 还具有其他用途,我们将在后面的指南中看到其他用途。
数组更新检测
变异方法
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/) }) |
注意事项
由于 JavaScript 的限制, Vue 不能检测以下变动的数组:当你利用索引直接设置一个项时,例如:
vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如:
vm.items.length = newLength
为了避免第一种情况,以下两种方式将达到像
vm.items[indexOfItem] = newValue的效果, 同时也将触发状态更新:
// Vue.set Vue.set(example1.items, indexOfItem, newValue) |
// Array.prototype.splice` example1.items.splice(indexOfItem, 1, newValue) |
splice:
example1.items.splice(newLength) |
显示过滤/排序结果
有时,我们想要显示一个数组的过滤或排序副本,而不实际改变或重置原始数据。在这种情况下,可以创建返回过滤或排序数组的计算属性。例如:
<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循环中) 使用 method 方法:
<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 }) } } |
相关文章推荐
- Vue.JS入门教程之列表渲染
- Vue.js学习教程之列表渲染详解
- Vue.js学习 Item7 -- 条件渲染与列表渲染
- Vue.js教程5-条件渲染
- Vuejs——(1)入门(单向绑定、双向绑定、列表渲染、响应函数)
- Vue.js入门学习--列表渲染--v-for遍历数组生成元素(四)
- Vue.js-列表渲染
- Vue.js笔记-条件渲染 列表渲染
- Vue.js 系列教程 1:渲染,指令,事件
- Vue.js列表渲染绑定jQuery插件的正确姿势
- Vue.js 学习(6) -- Vue指令之:列表渲染
- vue.js(8)-列表渲染
- Vue.js 系列教程 1:渲染,指令,事件
- Vue.js教程: 构建一个预渲染SEO友好的应用示例
- Vue.js学习 Item7 -- 条件渲染与列表渲染
- Vuejs——(1)入门(单向绑定、双向绑定、列表渲染、响应函数)
- Vue.js中的列表渲染:v-for
- VUEJS实战之构建基础并渲染出列表(1)
- Vue.js列表渲染难点:对象中数组深度更新问题