用vue簡(jiǎn)單的實(shí)現(xiàn)點(diǎn)擊按鈕切換背景顏色，具體代碼如下所示：

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

點(diǎn)擊前

點(diǎn)擊后

就這樣簡(jiǎn)單的切換效果就達(dá)到了！！！！

附錄：vue-綁定class實(shí)現(xiàn)動(dòng)態(tài)切換按鈕背景顏色

動(dòng)態(tài)的綁定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); //點(diǎn)擊添加字體顏色，其他的刪除class名稱(chēng) this.dynamic = index; } },}</script><style scoped> .colorChange { background-color: orange; }</style>

總結(jié)

到此這篇關(guān)于vue實(shí)現(xiàn)點(diǎn)擊按鈕切換背景顏色的示例代碼的文章就介紹到這了,更多相關(guān)vue點(diǎn)擊按鈕切換背景顏色內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！