<vue>…… v-if 与 v-show ……//

标签：区别   flag   display   style   size   用户   splay   ack   data   

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

<vue>…… v-if 与 v-show ……//

标签：区别   flag   display   style   size   用户   splay   ack   data   

原文地址：https://www.cnblogs.com/jerome92/p/10344451.html