作者:昆哥2502852107 | 来源:互联网 | 2022-03-21 15:10
这篇文章主要介绍了用vue简单的实现点击按钮切换背景颜色,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
用vue简单的实现点击按钮切换背景颜色,具体代码如下所示:
// 在methods方法里面
data () {
time: 3,
increase: 5,
},
methods: {
changeBg (index) {
if (index === 3 || index === 4) {
this.time = index
} else if (index === 5 || index === 6) {
this.increase = index
} else {
this.sort = index
}
}
}
// css样式
点击前
![在这里插入图片描述](https://img.php1.cn/3cd4a/9c03/8fd/61dd07853cb9454e.png)
点击后
![在这里插入图片描述](https://img.php1.cn/3cd4a/9c03/8fd/ed92f7e9b23f3a4a.png)
就这样简单的切换效果就达到了!!!!
附录:vue-绑定class实现动态切换按钮背景颜色
动态的绑定class
![](https://img.php1.cn/3cd4a/9c03/8fd/a1525856ab082b89.png)
{{list.effect}}
{{list.duration}}分钟{{list.money}}元
总结
到此这篇关于vue实现点击按钮切换背景颜色的示例代码的文章就介绍到这了,更多相关vue点击按钮切换背景颜色内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!