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

說下需求，我是做一個(gè)顯示框，當(dāng)status為1時(shí)，代表成功狀態(tài)，這個(gè)時(shí)候顯示成功圖片；當(dāng)status為0時(shí)，代表失敗狀態(tài)，這個(gè)時(shí)候顯示失敗圖片。我一開始的做法呢是使用v-if，這會(huì)才上代碼看看，咳、咳

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

　這樣子做呢，也不是不行哈，換個(gè)思路用綁定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標(biāo)簽里src的值也可以

? ?html

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

　js

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

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

?

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

?

　

轉(zhuǎn)載于:https://www.cnblogs.com/ddkei/p/9362151.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。