详解 Vue 的 v-if 和 v-show
Vue 中的 v-if 和 v-show:
v-if 和 v-show 都可以切换元素的显示和隐藏
区别:v-if 的话是直接把元素移除掉了,而 v-show 只是隐藏了元素,元素还在内存中,如果需要频繁地切换使用 v-show 比较好
使用如下:
<div id="app">
<input type="button" value="点我切换显示" @click="ok=!ok" />
<p v-if="isShow">成功</p>
<p v-else>失败</p>
<div v-if="score>=90">一血</div>
<div v-else-if="score>=60">双杀</div>
<div v-else-if="score>=80">三杀</div>
<div v-else-if="score>=90">四杀</div>
<div v-else>五杀</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false,
ok:false,
score: 90
}
})
</script>
Vue 的 v-if 和 v-show 总结就这么多吧!
本文来自博客园,作者:LiJialong,转载请注明原文链接:https://www.cnblogs.com/carver/articles/17115935.html