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

用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点击按钮切换背景颜色内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！