vue?如何根據(jù)條件判斷屬性的添加和去除
根據(jù)條件判斷屬性的添加和去除
寫(xiě)一個(gè)列表,然后想要在查詢(xún)數(shù)據(jù)的過(guò)程中添加loading樣式,這個(gè)時(shí)候需要添加一個(gè)loading屬性,但是添加之后會(huì)有直接展示loading。
解決方法
:loading = isLoading
在下面需要注冊(cè)isLoading為boolean類(lèi)型,如下:
isLoading:false/true
然后在開(kāi)始查詢(xún)的時(shí)候改為false,查詢(xún)結(jié)果出來(lái)之后改為false
this.isLoading = true this.isLoading = false
Vue 的條件判斷語(yǔ)句
v-if
條件判斷用 v-if 指令
代碼示例:在元素中使用 v-if 指令
<div id="app"> ?? ?<input type="button" value='toggle' @click='flag=!flag'> ? ? <h3 v-if='flag'>v-if directive</h3> </div>
var vm = new Vue({ ?? ?el:'#app', ? ? data:{ ? ? ? ?flag:true ? ? }, ? ? methods:{} });
這里, v-if 指令將根據(jù)表達(dá)式 flag 的值 (true 或 false ) 來(lái)決定是否插入 h3 元素。
v-else
可以用 v-else 指令給 v-if 添加一個(gè) “else” 塊
代碼示例:在元素中使用 v-if , v-else 指令
<div id="app"> ? ? <h3 v-if='flag'>Yes</h3> ? ? ? ? <h3 v-else='flag'>No</h3> </div>
var vm = new Vue({ ?? ?el:'#app', ? ? data:{ ? ? ? ?flag:true ? ? }, ? ? methods:{} });
這里, v-if,v-else 指令將根據(jù)表達(dá)式 flag 的值 (true 或 false ) 來(lái)決定是否插入 h3 元素以及元素中的值。
v-else-if
v-else-if 在 2.1.0 新增,用作 v-if 的 else-if 塊??梢枣?zhǔn)降亩啻问褂?/p>
代碼示例:在元素中使用 v-if , v-else, v-else-if 指令
<div id="app"> ? ? <h3 v-if='star==="Jackson"'>Jackson</h3> ? ? ? ? <h3 v-else-if='star==="Lay"'>Lay</h3> ? ? ? ? <h3 v-else='star==="Yang"'>Yang</h3> </div>
var vm = new Vue({ ?? ?el:'#app', ? ? data:{ ? ? ? ?star:Jackson ? ? }, ? ? methods:{} });
v-else 、v-else-if 必須跟在 v-if 或者 v-else-if之后。
v-show
v-show 跟 v-if 的效果差不多;但本質(zhì)有很大的區(qū)別。
代碼示例:v-if 與 v-show 的區(qū)別
? ? <div id="app"> ? ? ? ? <input type="button" value='toggle' @click='toggle'> ? ? ? ? <!-- 一般來(lái)說(shuō),v-if 有更高的切換消耗,而 v-show 有更高的初始渲染消耗。 ? ? ? ? 因此,如果需要頻繁切換:用 v-show 較好;如果在運(yùn)行時(shí)條件不大可能改變: ? ? ? ? 用 v-if 較好 --> ? ? ? ? <h3 v-if='flag'>v-if directive</h3> ? ? ? ? <h3 v-show='flag'>v-show directive</h3> ? ? </div>
<script> ? ? var vm = new Vue({ ? ? ? ? el:'#app', ? ? ? ? data:{ ? ? ? ? ? ? flag:true ? ? ? ? }, ? ? ? ? methods:{ ? ? ? ? ? ? toggle(){ ? ? ? ? ? ? ? ? this.flag =! this.flag; ? ? ? ? ? ? } ? ? ? ? } ? ? }); </script>
v-if 與 v-show 的區(qū)別
區(qū)別一:
- v-if 是動(dòng)態(tài)添加,當(dāng)值為 false時(shí),是完全移除該元素,即 DOM 不存在;
- v-show 僅隱藏 / 顯示,值為 false 時(shí),該元素依舊存在于 DOM,若其原樣式設(shè) display:none 則會(huì)導(dǎo)致其無(wú)法正常顯示
區(qū)別二:
- v-if 有較高的切換性能消耗
- v-show 有較高的初始渲染消耗
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue elementui字體圖標(biāo)顯示問(wèn)題解決方案
這篇文章主要介紹了Vue elementui字體圖標(biāo)顯示問(wèn)題解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08vue深拷貝的3種實(shí)現(xiàn)方式小結(jié)
當(dāng)使用同一個(gè)對(duì)象產(chǎn)生沖突時(shí),可以使用lodash包,對(duì)該對(duì)象進(jìn)行深拷貝,從而使操作的對(duì)象為不同的對(duì)象,這篇文章主要給大家介紹了關(guān)于vue深拷貝的3種實(shí)現(xiàn)方式,需要的朋友可以參考下2023-02-02基于vue v-for 循環(huán)復(fù)選框-默認(rèn)勾選第一個(gè)的實(shí)現(xiàn)方法
下面小編就為大家分享一篇基于vue v-for 循環(huán)復(fù)選框-默認(rèn)勾選第一個(gè)的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03vue 2.1.3 實(shí)時(shí)顯示當(dāng)前時(shí)間,每秒更新的方法
今天小編就為大家分享一篇vue 2.1.3 實(shí)時(shí)顯示當(dāng)前時(shí)間,每秒更新的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09Vue2.x中的父組件傳遞數(shù)據(jù)至子組件的方法
這篇文章主要介紹了Vue2.x中的父組件數(shù)據(jù)傳遞至子組件的方法,需要的朋友可以參考下2017-05-05