v-for遍历数组和对象
- 数组:
item in items
- 对象:
(value, name, index) in object
<ul id="app">
<!--遍历数组 可选参数index-->
<!--item in items同义item of items-->
<li v-for="item, index in items":key="item.message">
{{parentMessage}} - {{index}} - {{item.message}}
</li>
<!--遍历对象 可选参数value name index-->
<li v-for="(value, name, index) in object">
{{index}}. {{name}}: {{value}}
</li>
</ul>
<script>
var app = new Vue({
el: '#app',
data: {
parentMessage: 'parent',
items: [
{message: 'aaa'},
{message: 'bbb'},
],
object: {
title: 'How to do lists in Vue',
author: 'jane doe',
publishedAt: '2016-04-10'
}
}
})
</script>
维护状态
当 Vue 正在更新使用 v-for
渲染的元素列表时,它默认使用“就地更新”的策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序,而是就地更新每个元素,并且确保它们在每个索引位置正确渲染。
这种方法高效,但只适用于不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出。
为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key
attribute:
<div v-for="item in items" v-bind:key="item.id">
<!-- 内容 -->
</div>
不要使用对象或数组之类的非基本类型值作为 v-for
的 key
。请用字符串
或数值
类型的值。
数组更新检测(数据结构中封装好的方法,增删查改)
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
example1.items.push({ message: 'Baz' })
这三种方法替换为新的数组
- 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
})
}
}
<ul v-for="set in sets">
<li v-for="n in even(set)">{{ n }}</li>
</ul>
data: {
sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
},
methods: {
even: function (numbers) {
return numbers.filter(function (number) {
return number % 2 === 0
})
}
}
显示整数
<div>
<span v-for="n in 10">{{ n }} </span>
</div>
和template
共用
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider" role="presentation"></li>
</template>
</ul>
v-for
和v-if
公用
当它们处于同一节点,v-for
的优先级比 v-if
更高,这意味着 v-if
将分别重复运行于每个 v-for 循环中。可以在v-for
外部使用 v-if
以跳过循环
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>
在组件上使用v-for
<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 = ''
}
}
})