溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“Vue常用指令v-if與v-show的區別有哪些”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Vue常用指令v-if與v-show的區別有哪些”吧！
前言
1. v-show
2. v-if
3. v-show和v-if的區別
1. 在原理方面的區別
2. 在使用應用場景方面的區別
總結
v-show 和v-if 是比較常用的Vue指令，經常用來判斷渲染部分代碼塊，但兩者具體的區別在哪里呢 ？？？
首先我們可以來看一下Vue中文社區說明文檔的介紹:
Vue中文社區說明文檔中簡單來說是：初始渲染的時候進行條件判斷展示；
v-show指令的作用是：根據真假值切換元素的顯示狀態,是響應式的
語法表達v-show = " 表達式 "
原理是修改元素的的CSS屬性(display)來決定實現顯示還是隱藏
指令后面的內容最終都會解析為布爾值
值為真(true)的時候元素顯示，值為假(false)的時候元素隱藏
數據改變之后呢對應的元素的顯示狀態也是會同步更新的
<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>
v-if指令的作用：根據表達式的真假切換元素的顯示狀態
v-if = "表達式"
本質是通過操縱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>v-show指令：元素始終被渲染到HTML，它只是簡單的偽元素設置css的style屬性，當不滿足條件的元素被設置style=“display：none”的樣，是通過修改元素的的CSS屬性(display)來決定實現顯示還是隱藏
v-if指令：滿足條件是會渲染到html中，不滿足條件時是不會渲染到html中的，是通過操縱dom元素來進行切換顯示
v-if需要操作dom元素，有更高的切換消耗.
v-show只是修改元素的的CSS屬性有更高的初始渲染消耗。
如果需要非常頻繁的切換，建議使用v-show較好，如果在運行時條件很少改變，則使用v-if較好
感謝各位的閱讀，以上就是“Vue常用指令v-if與v-show的區別有哪些”的內容了，經過本文的學習后，相信大家對Vue常用指令v-if與v-show的區別有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
