大连微信网站制作,做网站维护工作难吗,html5响应式手机网站,学ui设计学费需要多少钱简单的绑定class就不说了#xff0c;它可以和对象语法一样#xff0c;使用data、computed、methods三种方法。说一下我在工作里体会到这种作法的好处。那么直接上代码。。。咔咔咔 说下需求#xff0c;我是做一个显示框#xff0c;当status为1时#xff0c;代表成功状态它可以和对象语法一样使用data、computed、methods三种方法。说一下我在工作里体会到这种作法的好处。那么直接上代码。。。咔咔咔 说下需求我是做一个显示框当status为1时代表成功状态这个时候显示成功图片当status为0时代表失败状态这个时候显示失败图片。我一开始的做法呢是使用v-if这会才上代码看看咳、咳 div v-ifstatus0img src../images/failed.png classimgIcon
/divdiv v-elseimg src../images/success.png classimgIcon
/div这样子做呢也不是不行哈换个思路用绑定class写 html div :classclasses/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 :srcimgName classimgIconjs computed: {imgName () {return this.status ? ../images/success.png: ../images/success.png}
} 不过这里要特别注意一下图片的路径问题哦不然可能不显示。 以上呢是我工作中遇到的问题可能解决思路不是很好做个记录。 转载于:https://www.cnblogs.com/ddkei/p/9362151.html
