vue中用數組語法綁定class

簡單的綁定class就不說了，它可以和對象語法一樣，使用data、computed、methods三種方法。說一下我在工作里體會到這種作法的好處。那么直接上代碼。。。咔咔咔

說下需求，我是做一個顯示框，當status為1時，代表成功狀態，這個時候顯示成功圖片；當status為0時，代表失敗狀態，這個時候顯示失敗圖片。我一開始的做法呢是使用v-if，這會才上代碼看看，咳、咳

<div v-if="status===0">
      <img src="../images/failed.png" class="imgIcon">
</div>
 <div v-else>
      <img src="../images/success.png" class="imgIcon">
</div>

　這樣子做呢，也不是不行哈，換個思路用綁定class寫

   html：

<div :class="classes"></div>

　js：

computed: {
      classes () {
           return [
               'imgIcon',
                {
                     ['imgIcon-' + this.status]: this.status !== ''
                }
            ]
      }
}

　css：

.imgIcon{
    width: 2.6rem;
    height: 2.6rem;
    margin: auto 0;
}
.imgIcon-1{
    background: url(../assets/images/success.png) no-repeat center/cover;    
}
.imgIcon-0{
    background: url(../assets/images/failed.png) no-repeat center/cover;
}

　

后來想了想，就替換img標簽里src的值也可以

   html

<img :src="imgName" class="imgIcon">

　js

computed: {
       imgName () {
            return this.status ? "../images/success.png": "../images/success.png"
     }
}　　

　不過這里要特別注意一下圖片的路徑問題哦，不然可能不顯示。

 

以上呢，是我工作中遇到的問題，可能解決思路不是很好，做個記錄。