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

 

转载于:https://www.cnblogs.com/jerome92/p/10344451.html