element 点击切换按钮的颜色
1.html
<el-button-group label="时间">
<el-button @click="seeHour" :type="buttonhour" >时</el-button>
<el-button @click="seeDay" :type="buttonday" >天</el-button>
<el-button @click="seeMonth" :type="buttonmonth" >月</el-button>
</el-button-group>
2.数据
data() {
return {
buttonhour:'primary',
buttonday:'',
buttonmonth:'',
}
}
3.方法
seeHour() {
this.showDay=false;
this.showHour=true;
this.showMonth=false;
this.buttonhour='primary';
this.buttonday='';
this.buttonmonth='';
},
seeDay() {
this.showDay=true;
this.showHour=false;
this.showMonth=false;
this.buttonday='primary';
this.buttonhour='';
this.buttonmonth='';
},
seeMonth() {
this.showDay=false;
this.showHour=false;
this.showMonth=true;
this.buttonmonth='primary';
this.buttonday='';
this.buttonhour='';
}
效果:

element 点击切换按钮的颜色的更多相关文章
- 自动 点击切换 按钮切换 轮播无缝选项卡 ----原生js
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...
- js_常见特效——点击切换_背景颜色_收起与展开
<script src="../js/jquery-1.8.3.min.js"></script><script type="text/ja ...
- jq点击切换按钮最简洁代码
<div id="swphoto"> <img src="1.jpg"> <img src="2.jpg&q ...
- 点击jQuery Mobile的按钮改变颜色
jquery-mobile-移动 我有这样的代码来改变点击一个按钮的颜色: $('.fav').live('click', function(e) { $(this).buttonMarkup({ t ...
- jquery——左右按钮点击切换一组图片功能
一.最终效果 二.功能分析 1.需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮 ...
- 关于bxslider在点击左右按钮之后不能自动切换的问题解决
bxslider很好,但是也弄了个很脑残的设置,每次点击左右按钮之后,就不能自动切换了,要重新点击下方播放的按钮,相当不好用.问度娘没能解决,但是发现一个论坛说要修改源码,这个也找了好久,没找到,问群 ...
- 用 JS 点击左右按钮 使图片切换 - 最精简版-ljx2380000-ChinaUnix博客
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- vue点击切换颜色限制个数(用了mui框架)
vue点击切换颜色 只能点击一个 <!doctype html> <head> <meta charset="UTF-8"> <title ...
- 点击提交按钮,屏幕会出现闪烁问题,element.style问题
点击提交按钮,屏幕会出现闪烁问题 通过后台调试发现,在点击的按钮的时候会给body添加一个padding值,而且会出现怎么都修改不了的问题,会发现里面会有 element.style的值,这其实是一种 ...
随机推荐
- Rxjava Retrofix2 okhttp3网络框架自解(转)
直接代码 类一 public class Okhttp3Utils { private static OkHttpClient mOkHttpClient; public static OkHttpC ...
- js 输入整数
1.我用 /^\+?[1-9][0-9]*$/ 貌似不对(小数也可以输入) 2.输入整数 n = /^[1-9]\d*$/; . -]\d*$/; //判断字符串是否为数字 if (!value) ...
- 19.并发下的ArrayList、HashMap,Integer加锁问题
import java.util.ArrayList; import java.util.Vector; /** * 并发下的ArrayList */ public class ArrayListMu ...
- python 控制终端执行的subprocess.getoutput函数
devices = subprocess.getoutput('ios-deploy -c') print(devices) 如上代码中,subprocess.getoutput函数首先在终端执行命令 ...
- ATM&购物商城程序
模拟实现一个ATM + 购物商城程序 额度15000或自定义 实现购物商城,买东西加入购物车,调用信用卡接口转账 可以体现,手续费5% 支持多账户登录 支持账户间转账 记录每月日常消费流水 提供还款接 ...
- PHP+Redis 有序集合实现 24 小时排行榜实时更新
基本介绍 Redis 有序集合和集合一样也是 string 类型元素的集合,且不允许重复的成员. 不同的是每个元素都会关联一个 double 类型的分数.redis 正是通过分数来为集合中的成员进行从 ...
- PostgreSQL按年月日分组(关键词:extract time as Year/Month/Day)
Select EXTRACT(year from cast(joindate as timestamp)) as Year, EXTRACT(month from cast(joindate as t ...
- 在树莓派3B上搭建LAMP
一.安装apache2 sudo apt-get install apache2 在电脑上输入树莓派的网址会有如下显示 二.安装Mysql sudo apt-get install mysql-ser ...
- express设置允许跨域访问该服务.
const express = require('express');const app = express(); //设置允许跨域访问该服务.app.all('*', function (req, ...
- prototype、proto和constructor 关系
记录: 1.构造函数:如下,Foo()就是一个构造函数 function Foo(){} 2.prototype:每一个构造函数都有一个属性叫prototype,相当于一个指针,指向它的原型对象 Fo ...