…… v-if 與 v-show ……//

#v-if

• 用法：

  根據表達式的值的真假條件渲染元素。在切換時元素及它的數據綁定 / 組件被銷燬並重建。若是元素是 <template> ，將提出它的內容做爲條件塊。

  當條件變化時該指令觸發過渡效果。

！當和 v-if 一塊兒使用時，v-for 的優先級比 v-if 更高。

 

#v-show

 

• 用法：

  根據表達式之真假值，切換元素的 display CSS 屬性。

  當條件變化時該指令觸發過渡效果

區別：

        相比較而言  v-show的性能比v-if要高一些

        使用的場景：
            普通用戶  超級管理頁面渲染的信息 能夠用v-if

            元素隱藏顯示 v-show

 

<div id="box">
    <div v-show="flag">{{message}}</div>  //改變display
    <div v-if="flag">{{message}}</div>    //控制元素的重建/銷燬
</div>


<script>
    var vm = new Vue({
        el:"#box",
        data:{
            message:"小王",
            flag:true,
            num:21
        }
    })
</script>