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. SP2-0618: Cannot find the Session Identifier.

    [oracle@trade1 ~]$ sqlplus  user1/user1 SQL*Plus: Release 11.2.0.3.0 Production on Tue Aug 6 14:31:1 ...

  2. OpenCV常用基本处理函数(7)图像金字塔和直方图

    高斯金字塔 高斯金字塔的顶部是通过将底部图像中的连续的行和列去除得到的.顶部图像中的每个像素值等于下一层图像中 5 个像素的高斯加权平均值. 这样操作一次一个 MxN 的图像就变成了一个 M/2xN/ ...

  3. Mybatis基于SqlSession实现CRUD

    之前我们讲的基于XML还是接口注解配置都是使用接口实现CRUD,本文我们将要讲解通过splsession来实现CRUD,这种方法比较灵活. 基本配置 <!-- spring和MyBatis完美整 ...

  4. 阿里云 Centos 7 PHP7环境配置 LNMP

    首先更新系统软件 $ yum update 安装nginx 1.安装nginx源 $ yum localinstall http://nginx.org/packages/centos/7/noarc ...

  5. 高精度小数BigDecimal+二分——java

    高精度小数第一题 import java.util.*; import java.math.*; public class Main { public static void main(String ...

  6. Database基础(六):实现MySQL读写分离、MySQL性能调优

    一.实现MySQL读写分离 目标: 本案例要求配置2台MySQL服务器+1台代理服务器,实现MySQL代理的读写分离: 用户只需要访问MySQL代理服务器,而实际的SQL查询.写入操作交给后台的2台M ...

  7. if语句里面continue和break的区别

    break:结束整个循环体 continue:结束本次循环 代码说明: public static void main(String[] args) { int x=0; while(x++ < ...

  8. python读取数据库mysql报错

    昨天在学习PYTHON读取数据库的知识时,一直在报错,找不到原因. 最后同事说是语法错误. import sysreload(sys)sys.setdefaultencoding('gb18030') ...

  9. Tomcat负载均衡、调优核心应用进阶学习笔记(一):tomcat文件目录、页面、架构组件详解、tomcat运行方式、组件介绍、tomcat管理

    文章目录 tomcat文件目录 bin conf lib logs temp webapps work 页面 架构组件详解 tomcat运行方式 组件介绍 tomcat管理 tomcat文件目录 ➜ ...

  10. LightOJ 1030 Discovering Gold (概率/期望DP)

    题目链接:LightOJ - 1030 Description You are in a cave, a long cave! The cave can be represented by a \(1 ...