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. Rxjava Retrofix2 okhttp3网络框架自解(转)

    直接代码 类一 public class Okhttp3Utils { private static OkHttpClient mOkHttpClient; public static OkHttpC ...

  2. js 输入整数

    1.我用 /^\+?[1-9][0-9]*$/ 貌似不对(小数也可以输入) 2.输入整数  n = /^[1-9]\d*$/; . -]\d*$/; //判断字符串是否为数字 if (!value) ...

  3. 19.并发下的ArrayList、HashMap,Integer加锁问题

    import java.util.ArrayList; import java.util.Vector; /** * 并发下的ArrayList */ public class ArrayListMu ...

  4. python 控制终端执行的subprocess.getoutput函数

    devices = subprocess.getoutput('ios-deploy -c') print(devices) 如上代码中,subprocess.getoutput函数首先在终端执行命令 ...

  5. ATM&购物商城程序

    模拟实现一个ATM + 购物商城程序 额度15000或自定义 实现购物商城,买东西加入购物车,调用信用卡接口转账 可以体现,手续费5% 支持多账户登录 支持账户间转账 记录每月日常消费流水 提供还款接 ...

  6. PHP+Redis 有序集合实现 24 小时排行榜实时更新

    基本介绍 Redis 有序集合和集合一样也是 string 类型元素的集合,且不允许重复的成员. 不同的是每个元素都会关联一个 double 类型的分数.redis 正是通过分数来为集合中的成员进行从 ...

  7. PostgreSQL按年月日分组(关键词:extract time as Year/Month/Day)

    Select EXTRACT(year from cast(joindate as timestamp)) as Year, EXTRACT(month from cast(joindate as t ...

  8. 在树莓派3B上搭建LAMP

    一.安装apache2 sudo apt-get install apache2 在电脑上输入树莓派的网址会有如下显示 二.安装Mysql sudo apt-get install mysql-ser ...

  9. express设置允许跨域访问该服务.

    const express = require('express');const app = express(); //设置允许跨域访问该服务.app.all('*', function (req, ...

  10. prototype、proto和constructor 关系

    记录: 1.构造函数:如下,Foo()就是一个构造函数 function Foo(){} 2.prototype:每一个构造函数都有一个属性叫prototype,相当于一个指针,指向它的原型对象 Fo ...