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


Posted in Javascript onJune 23, 2020

用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实现点击按钮切换背景颜色的示例代码的文章就介绍到这了,更多相关vue点击按钮切换背景颜色内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
仿谷歌主页js动画效果实现代码
Jul 14 Javascript
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
Nov 25 Javascript
javascript动态判断html元素并执行不同的操作
Jun 16 Javascript
基于jquery实现等比缩放图片
Dec 03 Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
Aug 31 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 Javascript
解决VUEX兼容IE上的报错问题
Mar 01 Javascript
解决webpack dev-server不能匹配post请求的问题
Aug 24 Javascript
vue.js实现双击放大预览功能
Jun 23 #Javascript
vue实现分页的三种效果
Jun 23 #Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
Jun 23 #Javascript
weui上传多图片,压缩,base64编码的示例代码
Jun 22 #Javascript
详细分析Node.js 多进程
Jun 22 #Javascript
详细分析vue响应式原理
Jun 22 #Javascript
Vue循环遍历选项赋值到对应控件的实现方法
Jun 22 #Javascript
You might like
深入密码加salt原理的分析
2013/06/06 PHP
显示youtube视频缩略图和Vimeo视频缩略图代码分享
2014/02/13 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
js loading加载效果实现代码
2009/11/24 Javascript
angularjs指令中的compile与link函数详解
2014/12/06 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
2015/03/04 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
通过封装scroll.js 获取滚动条的值
2018/07/13 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
python基于windows平台锁定键盘输入的方法
2015/03/05 Python
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
Python操作Oracle数据库的简单方法和封装类实例
2018/05/07 Python
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
python实现指定ip端口扫描方式
2019/12/17 Python
如何基于python实现脚本加密
2019/12/28 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
Python 日期与时间转换的方法
2020/08/01 Python
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
构造方法和其他方法的区别
2016/04/26 面试题
党校自我鉴定范文
2013/10/02 职场文书
函授本科自我鉴定
2013/11/03 职场文书
团队精神的演讲稿
2014/05/14 职场文书
会计系毕业生求职信
2014/05/28 职场文书
1000字打架检讨书
2014/11/03 职场文书
2014年业务工作总结
2014/11/17 职场文书
护士工作心得体会
2016/01/25 职场文书
SQL Server使用导出向导功能
2022/04/08 SQL Server
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android