簡單的綁定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"} }　　

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

?

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

?

　

轉載于:https://www.cnblogs.com/ddkei/p/9362151.html

總結

以上是生活随笔為你收集整理的vue中用数组语法绑定class的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。