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

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

?

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

?