用vue簡單的實現點擊按鈕切換背景顏色，具體代碼如下所示：

<div class='btnTitle'> <div : @click='changeBg(3)'>15天</div> <div : @click='changeBg(4)'>30天</div> </div> <div class='btnTitle'> <div : @click='changeBg(5)'>增量</div> <div : @click='changeBg(6)'>總量</div> </div> // 在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樣式 <style lang='scss'>.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; } } </style>

點擊前

點擊后

就這樣簡單的切換效果就達到了！！！！

附錄：vue-綁定class實現動態切換按鈕背景顏色

動態的綁定class

<template> <div class='pay'> <div v-for='(list,index) in payconfigEntities' v-bind: direction='column' @click='getMoney(index)'> <div class='pay-money'>{{list.effect}}</div> <div class='pay-time'>{{list.duration}}分鐘{{list.money}}元</div> </div> </div></template><script> export default { name: 'Home', data() { return {payconfigEntities:[{'duration':6,'effect':'緩解疲勞','money':4},{'duration':6,'effect':'緩解疲勞','money':4},{'duration':6,'effect':'緩解疲勞','money':4}],dynamic:-1, } }, methods: { getMoney: function (index) { console.log(index); //點擊添加字體顏色，其他的刪除class名稱 this.dynamic = index; } },}</script><style scoped> .colorChange { background-color: orange; }</style>

總結

到此這篇關于vue實現點擊按鈕切換背景顏色的示例代碼的文章就介紹到這了,更多相關vue點擊按鈕切換背景顏色內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！