目錄

• 根據條件判斷屬性的新增和去除
• 解決方法
• 的條件判斷語句
• v-if
• v-else
• v-else-if
• v-show
• v-if 與 v-show 的區別

根據條件判斷屬性的新增和去除

寫一個列表，然後想要在查詢資料的過程中新增loading樣式，這個時候需要新增一個loading屬性，但是新增之後會有直接展示loading。

解決方法

:loading = isLoading

在下面需要註冊isLoading為boolean型別，如下：

isLoading:false/true

然後在開始查詢的時候改為false，查詢結果出來之後改為false

this.isLoadinwANZTGzgKJg = 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-iwww.cppcns.comf 指令將根據表示式 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',methods:{}
});

這裡， v-if，v-else 指令將根據表示式 flag 的值 (true 或 false ) 來決定是否插入 h3 元素以及元素中的值。

v-else-if

v-else-if 在 2.1.0 新增，用作 v-if 的 else-if 塊。可以鏈式的多次使用

程式碼示例：在元素中使用 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({
 http://www.cppcns.comel:'#app',data:{
   star:Jackson
  },methods:{}
});

v-else 、v-else-if 必須跟在 v-if 或者 v-else-if之後。

v-show

v-show 跟 v-if 的效果差不多；但本質有很大的區別。

程式碼示例：v-if 與 v-show 的區別

  <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>

v-if 與 v-show 的區別

區別一：

• v-if 是動態新增，當值為 false時，是完全移除該元素，即 DOM 不存在；
• v-show 僅隱藏 / 顯示，值為 false 時，該元素依舊存在於 DOM，若其原樣式設 display:none 則會導致其無法正常顯示

區別二：

• v-if 有較高的切換效能消耗
• v-show 有較高的初始渲染消耗

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援我們。