Vue ：条件判断（v-if 、v-show ）
1、v-if
（1）v-if 运⽤
只有在为true 的时候才会显⽰数据
（2）v-if 与v-else
v-if 为true 的时候执⾏if ，否则，执⾏else
（3）案例：v-if 与v-else
的应⽤
点击切换类型后可以切换显⽰内容，这个时候会存在input 标签复⽤的问题（切换后输⼊框中的内容没有改变，这是虚拟DOM ，尽可能地复⽤已经存在的元素，⽽不是新建⼀个元素，可以提升性能），可以增加key 属性，当key ⼀样的时候就会保留内容，不⼀样的时候就不会保留
2、v-show
与v-if 的区别
v-if：当条件为false 时, 包含v-if 指令的元素, 不会存在dom 中
<div id="app">
<h2 v-if ="true">{{message}}</h2>
</div>
<div id="app">
<h2 v-if ="false">{{message}}</h2>
<h1 v-else >hello</h1>
</div>
<body>
<div id="app">
<span v-if ="isUser">
<label for ="username">⽤户账号</label>
<input type="text" id="username" placeholder="⽤户账号">
</span>
<span v-else >
<label for ="email">⽤户邮箱</label>
<input type="text" id="email" placeholder="⽤户邮箱">
</span>
<button @click="isUser=!isUser">切换类型</button>
</div>
<script src="../js/vue.js"></script>
<script>
const  app = new  Vue({
el: '#app',
data: {
isUser: true
}
})
</script>
</body>
<body>
<div id="app">
<h2 v-if ="isShow" id="aaa">{{message}}</h2>
<h2 v-show="isShow" id="bbb">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const  app = new  Vue({
el: '#app',
data: {
message: 'hello',
isShow: true
}input标签placeholder属性
})
</script>
</body>
v-show: 当条件为false时, v-show只是给我们的元素添加⼀个⾏内样式: display: none 当显⽰与隐藏需要频繁切换的时候使⽤v-show，切换次数较少的时候使⽤v-if

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。