File tree Expand file tree Collapse file tree 1 file changed +6
-6
lines changed Expand file tree Collapse file tree 1 file changed +6
-6
lines changed Original file line number Diff line number Diff line change 6
6
7
7
## v-if
8
8
9
- 在字符串模板中,如 Handlebars,我们得像这样写一个条件块:
9
+ 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块:
10
10
11
11
``` html
12
12
<!-- Handlebars 模板 -->
@@ -15,7 +15,7 @@ order: 7
15
15
{{/if}}
16
16
```
17
17
18
- 在 Vue.js,我们使用 ` v-if ` 指令实现同样的功能:
18
+ 在 Vue.js ,我们使用 ` v-if ` 指令实现同样的功能:
19
19
20
20
``` html
21
21
<h1 v-if =" ok" >Yes</h1 >
@@ -48,7 +48,7 @@ order: 7
48
48
<h1 v-show =" ok" >Hello!</h1 >
49
49
```
50
50
51
- 不同的是有 ` v-show ` 的元素会始终渲染并保持在 DOM 中。` v-show ` 是简单的切换元素的 CSS 属性 ` display ` 。
51
+ 不同的是有 ` v-show ` 的元素会始终渲染并保持在 DOM 中。` v-show ` 是简单的切换元素的 CSS 属性 ` display ` 。
52
52
53
53
<p class =" tip " >注意 `v-show` 不支持 `<template >` 语法。</p >
54
54
@@ -88,13 +88,13 @@ order: 7
88
88
89
89
## v-if vs. v-show
90
90
91
- 在切换 ` v-if ` 块时,Vue.js 有一个局部编译/卸载过程,因为 ` v-if ` 之中的模板也可能包括数据绑定或子组件。` v-if ` 是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。
91
+ 在切换 ` v-if ` 块时, Vue.js 有一个局部编译/卸载过程,因为 ` v-if ` 之中的模板也可能包括数据绑定或子组件。 ` v-if ` 是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。
92
92
93
93
` v-if ` 也是** 惰性的** :如果在初始渲染时条件为假,则什么也不做——在条件第一次变为真时才开始局部编译(编译会被缓存起来)。
94
94
95
- 相比之下,` v-show ` 简单得多——元素始终被编译并保留,只是简单地基于 CSS 切换。
95
+ 相比之下, ` v-show ` 简单得多——元素始终被编译并保留,只是简单地基于 CSS 切换。
96
96
97
- 一般来说,` v-if ` 有更高的切换消耗而 ` v-show ` 有更高的初始渲染消耗。因此,如果需要频繁切换 ` v-show ` 较好,如果在运行时条件不大可能改变 ` v-if ` 较好。
97
+ 一般来说, ` v-if ` 有更高的切换消耗而 ` v-show ` 有更高的初始渲染消耗。因此,如果需要频繁切换 ` v-show ` 较好,如果在运行时条件不大可能改变 ` v-if ` 较好。
98
98
99
99
100
100
***
You can’t perform that action at this time.
0 commit comments