v-if和v-show的区别

Vue.js还提供了一个与v-if类似的指令 v-show,v-show也可以用于根据条件展示元素,且用法与v-if一致。

他们的区别在于,v-if的操作是DOM元素,而v-show操作的是元素的CSS属性(display属性),v-show不能与v-else配合使用。

<div id="app">
   <div v-show="loginByMobile">
     <label>手机号登录</label>
     <input type="text"placeholder="请输入手机号"key="by-mobile">
   </div>
   <div v-show="!loginByMobile">
     <label>邮箱登录</label>
     <input type="text" placeholder="请输入邮箱"key="by-email">
   </div>
   <button v-on:click="loginByMobile =!loginByMobile">更换登录方式</button>
</div>

v-show和v-if都可以用来控制标签的显示与隐藏

       <标签 v-show = '布尔值'></标签>

       <标签 v-if = '布尔值'></标签>

 当布尔值为true,他们就显示;当布尔值为false,他们就隐藏

<body>
    <div id="app"> 
        <div v-show="display">我是由v-show控制的</div>
        <div v-if="display">我是由v-if控制的</div>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                 display:true //布尔值
            }
        })
    </script>
</body>

【v-show】

1.本质就是标签display设置为none,控制隐藏。只是基于css进行切换。

2.v-show有更高的初始渲染消耗。

3.v-show适合频繁切换的情况。

【v-if】

1.动态的向DOM树内添加或者删除DOM元素。

2.v-if有更高的切换消耗。

3.v-if适合运行条件很少改变的情况。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值