Vue.js入门-3-条件渲染、列表渲染

条件渲染、列表渲染

条件渲染

v-if

我们可以使用v-if和v-else,实现逻辑判断功能。

1
2
3
4
5
6
7
8
9
10
11
12
<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>元素。

1
2
3
4
5
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>

v-else 和 v-else-if

1
2
3
4
5
6
7
8
9
10
11
12
<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,则输入的数据会保存

1
2
3
4
5
6
7
8
<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-showv-if相比

v-if是真实的条件渲染,会确保条件块在切换中适当地销毁与重建。也是惰性的,如果在初始化渲染时条件为假,则什么也不做

v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

一般来说v-if有更高的切换消耗,v-show有更高的初始化消耗。频繁切换用v-show,运行条件不大可能改变用v-if

1
<h1 v-show="ok">Hello!</h1>

注意,v-show 不支持 <template> 元素,也不支持 v-else

v-if 与 v-for 一起使用

v-ifv-for 一起使用时,v-for 具有比 v-if 更高的优先级。


列表渲染

用 v-for 把一个数组对应为一组元素

v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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 还支持一个可选的第二个参数为当前项的索引。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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 通过一个对象的属性来迭代。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>

你也可以提供第二个的参数为键名:

1
2
3
<div v-for="(value, key) in object">
{ { key } }: { { value } }
</div>

第三个参数为索引:

1
2
3
<div v-for="(value, key, index) in object">
{ { index } }. { { key } }: { { value } }
</div>

Key

当Vue用v-for正在更新已渲染过的元素列表时,默认如果数据项的顺序被改变,Vue将不是移动Dom元素来匹配数据项的顺序。而是简单复用此处每个元素,确保已经渲染过了。为了让Vue重新排序现有元素,需要给每一项提供一个key

1
2
3
<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() 。这些不会改变原始数组,但总是返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组:

1
2
3
example1.items = example1.items.filter(function (item) { 
return item.message.match(/Foo/)
})

对象更改检测注意事项

还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除

可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。

1
2
3
4
5
Vue.set(vm.userProfile, 'age', 27)

// 还可以使用 vm.$set 实例方法,它只是全局 Vue.set 的别名

vm.$set(this.userProfile, 'age', 27)

为已有对象赋予多个新属性,比如使用 Object.assign()_.extend()

在这种情况下,你应该用两个对象的属性创建一个新的对象。

1
2
3
4
this.userProfile = Object.assign({  }, this.userProfile, { 
age: 27,
favoriteColor: 'Vue Green'
})

显示过滤/排序结果

我们想要显示一个数组的过滤或排序副本,而不实际改变或重置原始数据。在这种情况下,可以创建返回过滤或排序数组的计算属性

1
2
3
4
5
6
7
8
9
10
11
12
<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 方法:

1
2
3
4
5
6
7
8
9
10
11
12
<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 也可以取整数。在这种情况下,它将重复多次模板。

1
2
3
<div>
<span v-for="n in 10">{ { n } } </span>
</div>

v-for on a <template>

类似于 v-if,你也可以利用带有 v-for<template> 渲染多个元素。比如:

1
2
3
4
5
6
<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 循环中。

当你想为仅有的一些项渲染节点时,这种优先级的机制会十分有用,如下:

1
2
3
<li v-for="todo in todos" v-if="!todo.isComplete">
{ { todo } }
</li>

上面的代码只传递了未完成的 todos。

而如果你的目的是有条件地跳过循环的执行,那么可以将 v-if 置于外层元素 (或 <template>)上。如:

1
2
3
4
5
6
<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 。

1
<my-component v-for="item in items" :key="item.id"></my-component>

2.2.0+ 的版本里,当在组件中使用 v-for 时,key 现在是必须的。

一个简单的 todo list 的完整例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<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>
文章目录
  1. 1. 条件渲染
    1. 1.1. v-if
      1. 1.1.1. 在 <template> 元素上使用 v-if 条件渲染分组
      2. 1.1.2. v-else 和 v-else-if
      3. 1.1.3. 用 key 管理可复用的元素
    2. 1.2. v-show
    3. 1.3. v-if 与 v-for 一起使用
  2. 2. 列表渲染
    1. 2.1. 用 v-for 把一个数组对应为一组元素
    2. 2.2. 一个对象的 v-for
    3. 2.3. Key
    4. 2.4. 数组更新检测
      1. 2.4.1. 变异方法(mutation method)
      2. 2.4.2. 非变异 (non-mutating method) 方法
    5. 2.5. 对象更改检测注意事项
    6. 2.6. 显示过滤/排序结果
    7. 2.7. 一段取值范围的 v-for
    8. 2.8. v-for on a <template>
    9. 2.9. v-for with v-if
    10. 2.10. 一个组件的 v-for
|