1.v-if
v-if用于条件性地渲染一块内容。后边跟的依旧是一个js表达式,这个表达式的返回值决定了这块内容是否会被真实地挂载到页面上。
(这块内容只会在指令的表达式返回 truthy 值的时候被渲染)
<div v-if="show">Hello World</div>
也可以用 v-else 添加一个“else 块”,不过一定要连写在一起使用:
<div v-if="show">Hello World</div>
<div v-else>Bye World</div>
或者添加v-else-if,充当 v-if 的“else-if 块”,可连续使用:
(v-else-if 也必须紧跟在带 v-if 或者 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 管理可复用的元素
Vue 为了高效地渲染元素,通常会复用已有元素而不是从头开始渲染。
<div v-if="show">
Username:
</div>
<div v-else>
Email:
</div>
那么在上面的代码中切换show的真值将不会清除用户已经输入的内容。
因为两个模板使用了相同的元素,vue会尽可能复用,输入框的值不会被替换掉。
这样也不总是符合实际需求,所以有一种方式来表达“这两个元素是完全独立的,不要复用它们”。
只需添加一个具有唯一值的key即可:
<div v-if="show" key="username-input">
Username:
</div>
<div v-else key="email-input">
Email:
</div>
现在,每次切换时,输入框都将被重新渲染。
2.v-show
另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样:
<div v-show="ok">Hello!</div>
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 的display属性
v-if 和v-show的区别
- v-if 是惰性的,只有当条件第一次变为真时,元素才会存在并渲染。
- v-show 不管初始条件是什么,元素总是会被渲染,即便条件为假,也是渲染了display为none的css属性。
- v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
ps:不推荐同时使用 v-if 和 v-for