首页 > 其他 > 详细

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

时间:2019-02-01 00:26:14      阅读:195      评论:0      收藏:0      [点我收藏+]

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!