v-if和v-show的区别

最新推荐文章于 2024-05-20 07:35:21 发布

Issssy

最新推荐文章于 2024-05-20 07:35:21 发布

阅读量172

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/Issssy/article/details/128034620

版权

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】