条件渲染、列表渲染
条件渲染
v-if
我们可以使用v-if和v-else，实现逻辑判断功能。
<div v-bind:style="styleObject" id="watch-example">
<p v-if="ok">Yes</p>
<p v-else>No</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#watch-example",
data: {
ok:true
}
})
</script>
在 <template> 元素上使用 v-if 条件渲染分组
v-if切换多个元素,可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
v-else 和 v-else-if
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
用 key 管理可复用的元素
使用key可以控制元素重用。例如下面代码，当允许用户在不同的登录方式之间切换。如果不添加key，则输入的数据会保存
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
v-show
与v-if类似，只不过v-show会先进行渲染，操作CSS属性display
v-show 与 v-if相比
v-if是真实的条件渲染，会确保条件块在切换中适当地销毁与重建。也是惰性的，如果在初始化渲染时条件为假，则什么也不做
v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说v-if有更高的切换消耗，v-show有更高的初始化消耗。频繁切换用v-show，运行条件不大可能改变用v-if
<h1 v-show="ok">Hello!</h1>
注意，
v-show不支持<template>元素，也不支持v-else。
v-if 与 v-for 一起使用
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
列表渲染
用 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>
<script>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
</script>
v-for 还支持一个可选的第二个参数为当前项的索引。
<ul id="example-2">
<li v-for="(item, index) in items">
{ { parentMessage } } - { { index } } - { { item.message } }
</li>
</ul>
<script>
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
</script>
一个对象的 v-for
你也可以用 v-for 通过一个对象的属性来迭代。
<ul id="v-for-object" class="demo">
<li v-for="value in object">
{ { value } }
</li>
</ul>
<script>
new Vue({
el: '#v-for-object',
data: {
object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
})
</script>
你也可以提供第二个的参数为键名：
<div v-for="(value, key) in object">
{ { key } }: { { value } }
</div>
第三个参数为索引：
<div v-for="(value, key, index) in object">
{ { index } }. { { key } }: { { value } }
</div>
Key
当Vue用v-for正在更新已渲染过的元素列表时，默认如果数据项的顺序被改变，Vue将不是移动Dom元素来匹配数据项的顺序。而是简单复用此处每个元素，确保已经渲染过了。为了让Vue重新排序现有元素，需要给每一项提供一个key
<div v-for="item in items" v-bind:key="item.id">
<!-- 内容 -->
</div>
数组更新检测
变异方法(mutation method)
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
非变异 (non-mutating method) 方法
filter(), concat() 和 slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})
对象更改检测注意事项
还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除
可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。
Vue.set(vm.userProfile, 'age', 27)
// 还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名
vm.$set(this.userProfile, 'age', 27)
为已有对象赋予多个新属性，比如使用 Object.assign() 或 _.extend()
在这种情况下，你应该用两个对象的属性创建一个新的对象。
this.userProfile = Object.assign({ }, this.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
显示过滤/排序结果
我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。
<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
})
}
}
一段取值范围的 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"></li>
</template>
</ul>
v-for with v-if
当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。
当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用，如下：
<li v-for="todo in todos" v-if="!todo.isComplete">
{ { todo } }
</li>
上面的代码只传递了未完成的 todos。
而如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 <template>)上。如：
<ul v-if="todos.length">
<li v-for="todo in todos">
{ { todo } }
</li>
</ul>
<p v-else>No todos left!</p>
一个组件的 v-for
在自定义组件里，你可以像任何普通元素一样用 v-for 。
<my-component v-for="item in items" :key="item.id"></my-component>
2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。
一个简单的 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: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\')">X</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>