这篇文章主要介绍了用vue简单的实现点击按钮切换背景颜色，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
用vue简单的实现点击按钮切换背景颜色，具体代码如下所示：
<div class="btnTitle"> <div class="btn-bg">15天</div><div class="btn-bg">30天</div></div><div class="btnTitle"> <div class="btn-bg">增量</div><div class="btn-bg">总量</div></div> // 在methods方法里面 data () { time: 3, increase: 5, }, methods: { changeBg (index) { if (index === 3 || index === 4) { this.time = ind<b>本文来源gao@!dai!ma.com搞$$代^@码!网</b>ex } else if (index === 5 || index === 6) { this.increase = index } else { this.sort = index } } } // css样式 .bg { background-color: rgb(12, 197, 89); color: #fff; } .btnTitle { display: flex; width: 400px; border: 1px solid #ccc; background-color: #fff; margin-left: 10px; border-radius: 5px; .btn-bg { width: 50%; height: 40px; text-align: center; line-height: 40px; border-radius: 5px; } }
点击前
点击后
就这样简单的切换效果就达到了！！！！
附录：vue-绑定class实现动态切换按钮背景颜色
动态的绑定class
<div class="pay"> <div class="pay-container"> <div class="pay-money">{{list.effect}}</div><div class="pay-time">{{list.duration}}分钟{{list.money}}元</div></div></div> .colorChange { background-color: orange; }
总结
到此这篇关于vue实现点击按钮切换背景颜色的示例代码的文章就介绍到这了,更多相关vue点击按钮切换背景颜色内容请搜索gaodaima搞代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持gaodaima搞代码网！
以上就是vue实现点击按钮切换背景颜色的示例代码的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue实现点击按钮切换背景颜色的示例代码
转载请注明原文链接：vue实现点击按钮切换背景颜色的示例代码
