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

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

扫描二维码关注公众号，回复： 2387131 查看本文章

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