vue?如何根據(jù)條件判斷屬性的添加和去除

更新時間：2022年01月23日 15:32:59 作者：Lan_Lan99

這篇文章主要介紹了vue?如何根據(jù)條件判斷屬性的添加和去除，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

根據(jù)條件判斷屬性的添加和去除

寫一個列表，然后想要在查詢數(shù)據(jù)的過程中添加loading樣式，這個時候需要添加一個loading屬性，但是添加之后會有直接展示loading。

解決方法

:loading = isLoading

在下面需要注冊isLoading為boolean類型，如下：

isLoading:false/true

然后在開始查詢的時候改為false，查詢結(jié)果出來之后改為false

this.isLoading = true
this.isLoading = false

Vue 的條件判斷語句

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ù)表達式 flag 的值 (true 或 false ) 來決定是否插入 h3 元素。

v-else

可以用 v-else 指令給 v-if 添加一個 “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ù)表達式 flag 的值 (true 或 false ) 來決定是否插入 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'>
? ? ? ? <!-- 一般來說，v-if 有更高的切換消耗，而 v-show 有更高的初始渲染消耗。
? ? ? ? 因此，如果需要頻繁切換：用 v-show 較好；如果在運行時條件不大可能改變：
? ? ? ? 用 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>