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

　不过这里要特别注意一下图片的路径问题哦，不然可能不显示。

 

以上呢，是我工作中遇到的问题，可能解决思路不是很好，做个记录。