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 点击切换按钮的颜色的更多相关文章

  1. 自动 点击切换 按钮切换 轮播无缝选项卡 ----原生js

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

  2. js_常见特效——点击切换_背景颜色_收起与展开

    <script src="../js/jquery-1.8.3.min.js"></script><script type="text/ja ...

  3. jq点击切换按钮最简洁代码

    <div id="swphoto">    <img src="1.jpg">    <img src="2.jpg&q ...

  4. 点击jQuery Mobile的按钮改变颜色

    jquery-mobile-移动 我有这样的代码来改变点击一个按钮的颜色: $('.fav').live('click', function(e) { $(this).buttonMarkup({ t ...

  5. jquery——左右按钮点击切换一组图片功能

    一.最终效果 二.功能分析 1.需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮 ...

  6. 关于bxslider在点击左右按钮之后不能自动切换的问题解决

    bxslider很好,但是也弄了个很脑残的设置,每次点击左右按钮之后,就不能自动切换了,要重新点击下方播放的按钮,相当不好用.问度娘没能解决,但是发现一个论坛说要修改源码,这个也找了好久,没找到,问群 ...

  7. 用 JS 点击左右按钮 使图片切换 - 最精简版-ljx2380000-ChinaUnix博客

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  8. vue点击切换颜色限制个数(用了mui框架)

    vue点击切换颜色 只能点击一个 <!doctype html> <head> <meta charset="UTF-8"> <title ...

  9. 点击提交按钮,屏幕会出现闪烁问题,element.style问题

    点击提交按钮,屏幕会出现闪烁问题 通过后台调试发现,在点击的按钮的时候会给body添加一个padding值,而且会出现怎么都修改不了的问题,会发现里面会有 element.style的值,这其实是一种 ...

随机推荐

  1. OAuth_1

    OAuth2.0是一个应用之间彼此访问数据的开源授权协议.比如,一个游戏应用可以 访问Facebook的用户数据.用户访问web游戏应用,该游戏应用要求用户通过Facebook 登录.用户登录到Fac ...

  2. input file 上传文件类型控制

    文件类型 accept *.3gpp audio/3gpp, video/3gpp.ac3 audio/ac3.asf allpication/vnd.ms-asf.au audio/basic.cs ...

  3. 转帖 移动端h5页面不同尺寸屏幕适配兼容方法

    1. viewport属性及html页面结构   <meta name="viewport" content="width=device-width,initial ...

  4. HTML5 回到顶部

    图片: html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &l ...

  5. git小乌龟图标不显示 windows系统

    1.修改注册表[windows + R 输入 regedit]进入注册信息,按照步骤找到 计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\Curre ...

  6. 搭建ELK和EFK

    公司突然发下任务让我搭建elk和efk,于是做完之后写入了博客,生产环境下,亲测可用哦 搭建ELK 一共两台服务器,一个节点(logstash) 主服务器上 修改最大链接和最大打开的文件 1.临时修改 ...

  7. 如果全球的沙子都对你发起DDoS攻击,如何破?

    IPv6已来 2016年6月1日开始,苹果规定所有提交至AppStore的应用必须兼容IPv6-only标准.可以预计,2018年底会有大量互联网资源.上网用户使用IPv6协议.这意味着,如果一个互联 ...

  8. windows 下redis在后台运行

    打开命令终端,cd进入redis目录 安装redis服务:redis-server --service-install redis.windows.conf --loglevel verbose re ...

  9. subsequence 2

    题目链接 题意:每次给出两个字母 和 只有这两个字母的原字符串的子序列,最后让你输出原字符串. 思路:先将字符转换为hash值,然后再转换成图,就是一个拓扑排序了,然后满足不了的情况有两种,一个是构造 ...

  10. redis安装-1

    redis安装 cd /opt/tools/ #包目录 tar -xf redis-.tar.gz cd redis- make#centos7安装   make MALLOC=libc && ...