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 相关文章推荐
简短几句 通俗解释javascript的闭包
Jan 17 Javascript
JavaScript常用全局属性与方法记录积累
Jul 03 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
Mar 03 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
BootStrap文件上传样式超好看【持续更新】
May 10 Javascript
javaScript 逻辑运算符使用技巧整理
May 03 Javascript
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 Javascript
在vue项目中引入vue-beauty操作方法
Feb 11 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
Dec 17 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 Javascript
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
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
PHP中创建空文件的代码[file_put_contents vs touch]
2012/01/20 PHP
PHP的password_hash()使用实例
2014/03/17 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
Linux下快速搭建php开发环境
2017/03/13 PHP
jquery异步循环获取功能实现代码
2010/09/19 Javascript
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
js indexOf()定义和用法
2012/10/21 Javascript
JSON语法五大要素图文介绍
2012/12/04 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
基于Vuejs的搜索匹配功能实现方法
2018/03/03 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
react项目从新建到部署的实现示例
2021/02/19 Javascript
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
python机器学习之神经网络(二)
2017/12/20 Python
用Python+OpenCV对比图像质量的几种方法
2019/07/15 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
10个python爬虫入门实例(小结)
2020/11/01 Python
利用CSS3实现进度条的两种姿势详解
2017/03/21 HTML / CSS
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
大学生全国两会报告感想
2014/03/17 职场文书
房屋转让协议书
2014/10/18 职场文书
健康状况证明书
2014/11/26 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
销售会议开幕词
2016/03/04 职场文书
写自招自荐信的绝招!
2019/04/19 职场文书
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python
Nginx反向代理、重定向
2022/04/13 Servers