Vue常用指令v-if與v-show的區(qū)別淺析
前言
v-show 和v-if 是比較常用的Vue指令,經(jīng)常用來判斷渲染部分代碼塊,但兩者具體的區(qū)別在哪里呢 ???
首先我們可以來看一下Vue中文社區(qū)說明文檔的介紹:
Vue中文社區(qū)說明文檔中簡單來說是:初始渲染的時候進行條件判斷展示;
1. v-show
v-show指令的作用是:根據(jù)真假值切換元素的顯示狀態(tài),是響應式的
語法表達v-show = " 表達式 "
原理是修改元素的的CSS屬性(display)來決定實現(xiàn)顯示還是隱藏
指令后面的內容最終都會解析為布爾值
值為真(true)的時候元素顯示,值為假(false)的時候元素隱藏
數(shù)據(jù)改變之后呢對應的元素的顯示狀態(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 = "表達式"
本質是通過操縱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,它只是簡單的偽元素設置css的style屬性,當不滿足條件的元素被設置style=“display:none”的樣,是通過修改元素的的CSS屬性(display)來決定實現(xiàn)顯示還是隱藏
- v-if指令:滿足條件是會渲染到html中,不滿足條件時是不會渲染到html中的,是通過操縱dom元素來進行切換顯示
2. 在使用應用場景方面的區(qū)別
- v-if需要操作dom元素,有更高的切換消耗.
- v-show只是修改元素的的CSS屬性有更高的初始渲染消耗。
- 如果需要非常頻繁的切換,建議使用v-show較好,如果在運行時條件很少改變,則使用v-if較好
總結
到此這篇關于Vue常用指令v-if與v-show區(qū)別的文章就介紹到這了,更多相關Vue指令v-if與v-show區(qū)別內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
VUE+Element-ui實戰(zhàn)之使用el-calendar日歷自定義顯示內容
這篇文章主要介紹了VUE+Element-ui實戰(zhàn)之使用el-calendar日歷自定義顯示內容方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03vue-router 2.0 跳轉之router.push()用法說明
這篇文章主要介紹了vue-router 2.0 跳轉之router.push()用法說明,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08淺談el-table中使用虛擬列表對對表格進行優(yōu)化
我們會經(jīng)常使用表格,如果數(shù)據(jù)量大就直接可以分頁,如果多條可能會影響表格的卡頓,那么應該如何進行優(yōu)化,感興趣的可以了解一下2021-08-08vue+elementUI動態(tài)增加表單項并添加驗證的代碼詳解
這篇文章主要介紹了vue+elementUI動態(tài)增加表單項并添加驗證的代碼,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-12-12