vue实现点击按钮切换背景颜色的示例代码

网络编程 2025/11/19 佚名

3 2 1

明霞山资源网 Design By www.htccd.com

用vue简单的实现点击按钮切换背景颜色，具体代码如下所示：

<div class="btnTitle">
  <div class="btn-bg" :class="{bg:time == 3}" @click="changeBg(3)">15天</div>
  <div class="btn-bg" :class="{bg:time == 4}" @click="changeBg(4)">30天</div>
 </div>
 <div class="btnTitle">
  <div class="btn-bg" :class="{bg:increase == 5}" @click="changeBg(5)">增量</div>
  <div class="btn-bg" :class="{bg:increase == 6}" @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 class="pay-container" v-for="(list,index) in payconfigEntities"
      v-bind:class="{colorChange:index==dynamic}" 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,点击切换颜色