快捷導(dǎo)航

Vue常用指令v-if與v-show的區(qū)別淺析

更新時(shí)間：2021年10月08日 14:40:59 作者：ZJPRENO

v-if和v-show的區(qū)別是前端面試中常問(wèn)的基礎(chǔ)知識(shí)點(diǎn),v-if、v-show顧名思義就是用來(lái)判斷視圖層展示效果的,下面這篇文章主要給大家介紹了關(guān)于Vue常用指令v-if與v-show區(qū)別的相關(guān)資料,需要的朋友可以參考下

前言

v-show 和v-if 是比較常用的Vue指令，經(jīng)常用來(lái)判斷渲染部分代碼塊，但兩者具體的區(qū)別在哪里呢？？？

首先我們可以來(lái)看一下Vue中文社區(qū)說(shuō)明文檔的介紹:

Vue中文社區(qū)說(shuō)明文檔中簡(jiǎn)單來(lái)說(shuō)是：初始渲染的時(shí)候進(jìn)行條件判斷展示；

1. v-show

v-show指令的作用是：根據(jù)真假值切換元素的顯示狀態(tài),是響應(yīng)式的

語(yǔ)法表達(dá)v-show = " 表達(dá)式 "

原理是修改元素的的CSS屬性(display)來(lái)決定實(shí)現(xiàn)顯示還是隱藏

指令后面的內(nèi)容最終都會(huì)解析為布爾值

值為真(true)的時(shí)候元素顯示，值為假(false)的時(shí)候元素隱藏

數(shù)據(jù)改變之后呢對(duì)應(yīng)的元素的顯示狀態(tài)也是會(huì)同步更新的

<body>
		<div id="app">
			<input type="button" value="切換顯示" @click="changeIsShow" />
			<p v-show="isShow">不裝了，我攤牌了，沒(méi)錯(cuò)你要找的就是我</p>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var  app = new Vue({
				el:"#app",
				data:{
					isShow:false
				},
				methods:{
					changeIsShow(){
						this.isShow = !this.isShow
					}
					
				}
			})
		</script>
	</body>

2. v-if

v-if指令的作用：根據(jù)表達(dá)式的真假切換元素的顯示狀態(tài)

v-if = "表達(dá)式"

本質(zhì)是通過(guò)操縱dom元素來(lái)進(jìn)行切換顯示

表達(dá)式的值為true的時(shí)候元素存在于dom樹(shù)中，為false的時(shí)候從dom樹(shù)中移除

<body>
		<div id="app">
			<input type="button" value="點(diǎn)我切換顯示" @click="changeIsShow" />
			<p v-if="isShow">不裝了，我攤牌了，沒(méi)錯(cuò)你要找的就是我</p>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var  app = new Vue({
				el:"#app",
				data:{
					isShow:false
				},
				methods:{
					changeIsShow(){
						this.isShow = !this.isShow
					}
				}
			})
		</script>
	</body>

3. v-show和v-if的區(qū)別

1. 在原理方面的區(qū)別

v-show指令：元素始終被渲染到HTML，它只是簡(jiǎn)單的偽元素設(shè)置css的style屬性，當(dāng)不滿足條件的元素被設(shè)置style=“display：none”的樣，是通過(guò)修改元素的的CSS屬性(display)來(lái)決定實(shí)現(xiàn)顯示還是隱藏
v-if指令：滿足條件是會(huì)渲染到html中，不滿足條件時(shí)是不會(huì)渲染到html中的，是通過(guò)操縱dom元素來(lái)進(jìn)行切換顯示