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适合运行条件很少改变的情况。
322
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
