温馨提示×

vue如何实现点击按钮切换背景颜色的效果

发布时间:2020-06-23 13:42:35 来源:亿速云 阅读:115 作者:清晨 栏目:开发技术

不懂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如何实现点击按钮切换背景颜色的效果

点击后

vue如何实现点击按钮切换背景颜色的效果

就这样简单的切换效果就达到了!!!!

附录:vue-绑定class实现动态切换按钮背景颜色

动态的绑定class

vue如何实现点击按钮切换背景颜色的效果

<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如何实现点击按钮切换背景颜色的效果内容对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,遇到问题就找亿速云,详细的解决方法等着你来学习!

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

免费拨打  400 100 2938 免费拨打 400 100 2938
24小时售后技术支持 24小时售后技术支持
返回顶部 返回顶部