Vue 指令v-if、v-show、v-once和v-cloak

前面兩篇文章中總結了v-bind、v-on、v-for、v-model等指令的相關内容，這篇文章将總結v-if、v-show、v-once、v-cloak等指令的内容。

（1）條件渲染：v-if，v-else，v-else-if

v-if條件指令可以根據表達式的值在DOM中渲染或銷毀元素/元件，下面是v-if的用法示例：

<div id="app">
    <div v-if="see">
        現在你能看到我，如果改變app.see的值為false，你就看不到我啦！
    </div>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
          see:true
        }
    })
</script>
           

1.在<template>元素上使用v-if條件渲染分組

上面的代碼中，v-if隻能控制一個元素，要想控制多個元素，可以把<template>當作包裹元素，并在<template>上使用v-if。最終渲染的結果不包含template，如果使用div作為包裹元素，最終渲染的結果會包含div：

<div id="app">
  <template v-if="is">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
  </template>

 <div v-if="is">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
  </div>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
           is:true
        },
    })
</script>
           

渲染的結果為：

<div id="app">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      
  <div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
  </div>
</div>
           

2.可以使用v-else指令來表示v-if的"else"塊：

<div id="app">
    <div v-if="is">我是v-if塊</div>
    <div v-else>我是v-else塊</div>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            is: true
        },
    })
</script>
           

渲染結果為：

<div id="app">
    <div>我是v-if塊</div>
</div>
           

v-else的元素必須緊跟在帶v-if或者v-else-if的元素後面，否則它不會被識别。

3.可以使用v-else-if充當v-if的的"else-if"塊

<div id="app">
    <div v-if="is===0">is的值為0</div>
    <div v-else-if="is===1">is的值為1</div>
    <div v-else-if="is===2">is的值為2</div>
    <div v-else-if="is===3">is的值為3</div>
    <div v-else>is的值不是0，1，2，3中的一個</div>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            is: 1
        },
    })
</script>
           

渲染的結果為：

<div id="app">
    <div>is的值為1</div>
</div>
           

v-else-if的元素必須緊跟在帶v-if的元素後面，否則它不會被識别。

（2）條件渲染：v-show

v-show的用法與v-if的用法基本上是一緻的：

<div id="app">
    <div v-show="is">你好！</div>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            is: true
        },
    })
</script>
           

渲染結果為：

<div id="app">
    <div>你好！</div>
</div>
           

下面是v-show與v-if的不同：

1.v-show不能在<template>上使用

v-if可以在<template>上使用，控制多個元素；而v-show是不支援<template>的。

<div id="app">
    <template v-show="is">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </template>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            is: false
        },
    })
</script>
           

<div id="app">
    <template v-show="is">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </template>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            is: true
        },
    })
</script>
           

無論is的值為false還是true，渲染的結果都是：

<div id="app">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
           

2.v-show切換css的display屬性，v-if會讓元素銷毀和重建

v-show：不管初始條件是true還是false，元素總會被渲染。在true與false互相變化時，它隻是簡單的切換css的display屬性。

v-if：在true與false的切換過程中，會讓元素銷毀和重建。如果初始條件為false，它什麼也不做，直到第一次條件變為true時才會渲染元素，如果之後條件又變為false，那麼它會銷毀元素。

<div id="app">
    <div v-if="is">這個元素使用了v-if</div>
    <div v-show="is">這個元素使用了v-show</div>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            is: true
        },
    })
</script>
           

渲染結果為：

<div id="app">
    <div>這個元素使用了v-if</div>
    <div>這個元素使用了v-show</div>
</div>
           

當app.is的值變為false時，渲染結果為:

<div id="app">
    <div style="display:none;">這個元素使用了v-show</div>
</div>
           

一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。是以，如果需要頻繁地切換條件，使用 v-show 較好；如果在運作時條件很少改變，則使用 v-if 較好。

（3）v-once

v-once是一個不需要表達式的指令。

定義了v-once的元素或元件隻渲染一次，包括元素或元件的所有子節點。首次渲染後，當資料改變時，插值處的内容不會再更新，綁定的類、id等也不會更新。

<div id="app" >
    <div v-once v-bind:class="left">{{message}}</div>
    <div v-once><span v-bind:id="left">{{message}}</span></div>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "你好！",
            left:"up"
        },
    });
    app.message="123";
    app.left="down";
</script>
           

渲染的結果為：

<div id="app" >
    <div class="up">你好！</div>
    <div><span id="up">你好！</span></div>
</div>
           

（4）v-cloak

v-cloak是一個不需要表達式的指令。

v-cloak 可以防止頁面加載時出現 vue.js 的變量名，需要與CSS的display:done一起配合使用。

<div id="app">
    {{message}}
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "你好！"
        },
    })
</script>
           

對于上面代碼，當網速較慢、Vue.js檔案還沒有加載完成時，頁面上會顯示{{message}}字樣，直到Vue建立執行個體、編譯模闆時，DOM才會被替換，是以在網速較慢時，這個過程中螢幕是有閃動的。v-cloak 與CSS的display:done一起配合使用可以解決這個問題：

為元素加上v-cloak指令：

<div id="app" v-cloak>
    {{message}}
</div>
           

在CSS中添加：

[v-cloak] {
  display: none;
}
           

以上操作的意思是，包含 v-cloak屬性的 html 标簽在頁面初始化時會被隐藏，在 Vue執行個體結束編譯時，v-cloak 屬性會被自動去除，對應的标簽就會變為可見。也就不會再出現閃動的問題。

在一般情況下，v-cloak是解決初始化慢導緻頁面閃動的最佳實踐，對于簡單的項目很實用。但在具有工程化的項目中，可能不再需要v-cloak。

參考：

1.Vue.js官方文檔

2.《Vue.js實戰》