条件渲染

v-if 和 v-show

1
2
3
4
5
6
7
<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>
<!-- if的元素可复用,禁止复用就加一个唯一的key属性 -->
<div v-show="ok">Hello!</div>
<!-- v-show的元素相比if始终渲染,不显示时为display:none; -->

列表渲染

v-for

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
<ul id="example-1">
<li v-for="item in items"><!-- in 可以用 of 替换 -->
{{ item.message }}
</li>
</ul>
<script>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{message: 'Foo' },
{message: 'Bar' }
]
}
})
</script>
对象迭代:
<ul id="repeat-object" class="demo">
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</li>
</ul>
<script>
new Vue({
el: '#repeat-object',
data: {
object: {
FirstName: 'John',
LastName: 'Doe',
Age: 30
}
}
})
</script>
整数迭代:
<span v-for="n in 10">{{ n }}</span>
<!-- 输出 1..10 -->
用 for 提供 key
<div v-for="item in items" :key="item.id">
<!-- 内容 -->
</div>

优先级

1
v-for > v-if