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

巴特西

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

最新文章

热门文章