Loading

详解 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 总结就这么多吧!

posted @ 2023-02-13 12:33  LiJialong  阅读(13)  评论(0编辑  收藏  举报