【vue.js】文档解读【day 3】 | 条件渲染

如果阅读有疑问的话，欢迎评论或私信！！

条件渲染

前言：

在JavaScript中，我们知道条件控制语句可以控制程序的走向，确保可以输出指定的结果。而在vue中，我们同样可以对标签使用条件控制指令控制页面的渲染走向。

v-if

v-if指令可以根据数据的真假值来确定是否渲染在页面中。例如：

<h1 v-if = "isActive">
    当前处于活跃状态
</h1>

v-else

同时，我们也可以使用else在数据为假值是渲染出不同的效果。例如：

<h1 v-if = "isActive" @click = "isActive = true">
    标签1
</h1>
<h1 v-else @click = "isActive = false">
    标签2
</h1>

这样就可以实现一个简单的导航栏啦！快去试试吧！

这里需要注意else的出现必定需要伴随着v-if或者v-else-if。

v-else-if

v-else-if同样和JavaScript中的条件控制语句一样，都是用来控制DOM的渲染。例如：

<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>

这里的v-else-if与v-else类似，都是需要跟在一个v-if或者一个v-else-if之后。

template中的v-if

在我们需要同时控制多个DOM渲染时，我们可以通过在template上添加v-if实现。例如：

<template v-if="ok">
  <h1>标题</h1>
  <p>段落1</p>
  <p>段落1</p>
</template>

当ok为true时，template中的元素才会被渲染。需要注意的是，template这个标签是一个不可见的包装器元素，它并不会被渲染。同样的，v-else和v-else-if也可以在template上使用。

v-show

除了使用v-if，我们还可以使用v-show来操作DOM的显示效果。例如：

<h1 v-show="ok">你好！</h1>

与v-if不同的是，v-show的原理是通过修改display来隐藏/显示DOM元素。那么，v-show与v-if渲染的方法是不同的。

v-if vs v-show

v-if控制的DOM是真的根据真假值来渲染，而v-show控制的DOM会总是渲染，只是会更改标签的display属性来隐藏/显示。

v-if的惰性：当v-if中的值第一次为false时，那么在首次渲染时，并不会做任何事，可以说是“沉睡”。只要v-if的值为true之后，它才会再次被“唤醒”渲染。

总的来说，v-if有更高的切换开销：当我们切换真假值是会重新渲染该元素，所以有一定的时间开销。v-show有更高的初始渲染开销：在首次渲染时，v-show总是被渲染。所以具体要怎么使用这两个指令，需要根据项目的具体需求来使用。