詳解Vue條件渲染指令：v-if 和 v-show

在Vue中，我們可以使用v-if和v-show來控制元素或模板的渲染。而v-if和v-show也屬於Vue的內部常用的指令。這裡所說的指令就是directive，指特殊的帶有前綴v-的命令，指令的值限定為綁定表達式，指令的職責是當表達式的值改變時把某些特殊的行為應用在DOM。

v-if和v-show兩個指令就是大家常說的條件渲染指令。 （學習影片分享：vue影片教學）

v-if  : 條件分支指令

---

##咱們先來看

# v-if指令。其作用是根據表達式的值true或false在DOM中產生或移除一個元素（或多個元素）。有點類似JavaScript中的if條件判斷。在Vue中除了v-if也有v-else-if和v-else之類。

v-if

前面說到過

v-if根據表達式來的值來判斷在DOM中生成元素。例如：

<!-- template -->
<div id="app">
    <h1 v-if="true">v-if的值为true时，显示这个div元素</h1>
</div>

// JavaScript
var app = new Vue({
    el: '#app',
    data: {

    }
})

這個時候

元素插入到div#app元素中，並且渲染出來：

在Vue中，如果你需要讓某個元素是否渲染，那就在該元素上加上

v-if指令，並且設定其值為true或false。例如上面的範例，我們設定的是true，元素被渲染。如果把上面的true值換成false，

元素就不會渲染。

除了直接給

v-if設定true或false之外，還可以透過表達式來做判斷。例如：

<!-- template -->
<div id="app">
    <h1 v-if="isShow">
    v-if的值为true时，显示这个div元素
    </h1>
</div>
// JavaScript
    var app = new Vue({
    el: '#app',
    data: { isShow: true }
})

上面的範例中，宣告了

isShow的值為true，然後在h1元素中，透過 v-if指令綁定isShow。其實類似v-if="true"。 h1元素也正常渲染：

#當你把

isShow設定為false時，h1元素又不會渲染。

上面我們看到的是渲染一個元素,如果要渲染多個元素，那是不是直接裡面嵌套多個元素呢？讓我們來驗證一下自己的想法：

<!-- template -->
<div id="app">
    <div v-if="isShow">
        <h1>我是标题</h1>
        <p>我是段落</p>
    </div>
</div>

和我們想像的一樣。但在Vue中，我們切換多個元素一般不這麼使用，而是配合

<template>元素當做包裝元素，並在上面使用v-if。最終的渲染結果不會包含<template>元素。如下圖所示：

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

v-else

v-else# #else類似，但其要和

v-if

搭配使用。例如我們做登錄，如果登入了顯示一個歡迎語，反則提示用戶去登入。那我們可以設定一個

isLogined

表達式，例如：

<!-- Template -->
<div id="app">
    <h1 v-if="isLogined">欢迎来到W3cplus！(^_^)</h1>
    <h1 v-else>请先登录，再来！(^_^)</h1>
</div>

// JavaScript
var app = new Vue({
    el: '#app',
    data: {
        isLogined: true
    }
})

如你所想，你在瀏覽器能看到下圖的效果：

把

isLogined

的值換成false

，那麼渲染出來的內容就改變了：

##在實際專案中，當我們一個元件在兩種狀態渲染的效果不一樣的時候，這個時候使用v-if和v-else

來配合

就很好實現了。例如中獎和未中​​獎：

<template v-if=&#39;isPrized&#39;>
    <figure>
        <figcaption>恭喜你中了5元红包</figcaption>
        <img src="xxx" />
    </figure>
</template>

<template v-else>
    <figure>
        <figcaption>亲，就差那么一点点</figcaption>
        <img src="xxx" />
    </figure>
</template></h3>
<p>v-else-if<code></code><code></code>#v-else-if<code>和JavaScript中的</code>else if <code>類似，需要和</code>v-if<code>搭配在一起使用。當有幾個條件同時在的時候，根據運算結果決定顯示與否。如下面的程式碼，根據</code>type<code>的值決定顯示哪一個區塊。例如，我們的例子，設定的</code>type<code>的值</code>B</p>，那麼就會顯示區塊<p>B<code>：</code></p>
<pre class="brush:php;toolbar:false"><!-- template -->
<div id="app">
    <div v-if="type === &#39;A&#39;">显示A区域</div>
    <div v-else-if="type === &#39;B&#39;">显示B区域</div>
    <div v-else>显示C区域</div>
</div>

// JavaScript
var app = new Vue({
    el: '#app',
    data: {
        type: "B"
    }
})

如果修改

type的值，將顯示的區域會不一樣：

#########

v-show

---

文章开头提到过，除了v-if之外，Vue还提供v-show也可以控制元素的渲染。v-show和v-if功能有点相似，其中v-if依赖于控制DOM节点，而v-show是依赖于控制DOM节点的display属性。当v-show传入的值为true时，对应DOM元素的display的值为block之类的，反之为false时，display的值为none。也就是用户看不到元素的显示，但其DOM元素还是存在的。

<!-- Template -->
<div id="app">
    <h1 v-show="true">我是一个标题</h1>
    <p v-show="isShow">我是一个段落</p>
</div>

// JavaScript
var app = new Vue({
    el: '#app',
    data: {
        isShow: false
    }
})

在浏览器看到的效果将是这样的：

注意，v-show 不支持 <template> 语法，也不支持 v-else。

v-if Vs. v-show

---

v-if和v-show都能控制DOM元素的显示和隐藏，但是在切换v-if模块时，Vue有一个局部编译/卸载过程，因为v-if中的模板可能包括数据绑定或者子组件，v-if是真是的条件渲染，它会确保条件快在切换时合适的销毁与重建条件块内的时间监听器和子组件。

两者之间的具体区别，官网是这样描述的：

• v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建
• v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
• 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。

总结

---

这篇文章主要了解了Vue中的v-if和v-show。这两个都是Vue的内部指令，而且都是用来控制元素的渲染。只不过，v-if判断是否加载，可以减轻服务器的压力，在需要时加载;v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅。虽然这两都都能很好的控制元素的渲染，但实际使用的时候，更应该根据自己的场景来判断使用哪一个指令。

原文地址：:https://www.w3cplus.com/vue/v-if-vs-v-show.html

（学习视频分享：web前端开发、编程基础视频）

以上是詳解Vue條件渲染指令：v-if 和 v-show的詳細內容。更多資訊請關注PHP中文網其他相關文章！