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. Codeforces 1188D Make Equal DP

    题意:给你个序列,你可以给某个数加上2的幂次,问最少多少次可以让所有的数相等. 思路(官方题解):我们先给序列排序,假设bit(c)为c的二进制数中1的个数,假设所有的数最后都成为了x, 显然x &g ...

  2. Thinkphp5.0 自定义命令command的使用

    在app下的command文件中,定义命令所在的模块以及命名. 然后保存,打开cmd,php think 定义的那个command的名字,完整的命令行为:php think clearInvalidO ...

  3. css3--文字效果

    text-shadow <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...

  4. 【算法】一致性Hash算法

    一.分布式算法 在做服务器负载均衡时候可供选择的负载均衡的算法有很多,包括: 轮循算法(Round Robin).哈希算法(HASH).最少连接算法(Least Connection).响应速度算法( ...

  5. UNP学习 Unix域协议

    Unix域协议并不是一个实际的协议族,它只是在同一台主机上进行客户-服务器通信时,使用与在不同主机上的客户和服务器间通信时相同的API的一种方法. 当客户和服务器在同一台主机上时,Unix域协议是这套 ...

  6. SCP-bzoj-4734

    项目编号:bzoj-4734 项目等级:Safe 项目描述: 戳这里 特殊收容措施: 附录: #include <bits/stdc++.h> #define range(i,c,o) f ...

  7. delphi 运行时提升软件到管理员权限

    //以管理员身份运行procedure RunAsAdmin(hWnd: HWND; aFile: string; aParameters: string);varsei: TShellExecute ...

  8. Kali Linux下运行nfc工具测试!

    由于Kali本身就集成了很多nfc工具,用起来很方便,再加上一个acr122u读卡器,来尝试PJ学校水卡! 首先安装驱动,到龙杰官网下载Linux的,解压后进入自己Linux发行版,Kali的是Deb ...

  9. #include <utility>

    #include <utility>这个头文件是什么用法 utility头文件定义了一个pair类型,是标准库的一部分,其原型为:template<class _Ty1, class ...

  10. mysql事件(定时任务)处理超时失效订单

    MySQL事件(定时任务) https://blog.csdn.net/pan_junbiao/article/details/86489237 UPDATE wz_mer_goods_spec as ...