简单的绑定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"
}
}
不过这里要特别注意一下图片的路径问题哦,不然可能不显示。
以上呢,是我工作中遇到的问题,可能解决思路不是很好,做个记录。