快捷導(dǎo)航

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

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

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

前言

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

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

Vue中文社區(qū)說明文檔中簡單來說是：初始渲染的時候進行條件判斷展示；

1. v-show

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

語法表達v-show = " 表達式 "

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

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

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

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

<body>
		<div id="app">
			<input type="button" value="切換顯示" @click="changeIsShow" />
			<p v-show="isShow">不裝了，我攤牌了，沒錯你要找的就是我</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ù)表達式的真假切換元素的顯示狀態(tài)

v-if = "表達式"

本質(zhì)是通過操縱dom元素來進行切換顯示

表達式的值為true的時候元素存在于dom樹中，為false的時候從dom樹中移除

<body>
		<div id="app">
			<input type="button" value="點我切換顯示" @click="changeIsShow" />
			<p v-if="isShow">不裝了，我攤牌了，沒錯你要找的就是我</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，它只是簡單的偽元素設(shè)置css的style屬性，當(dāng)不滿足條件的元素被設(shè)置style=“display：none”的樣，是通過修改元素的的CSS屬性(display)來決定實現(xiàn)顯示還是隱藏
v-if指令：滿足條件是會渲染到html中，不滿足條件時是不會渲染到html中的，是通過操縱dom元素來進行切換顯示