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. 力扣 -- 寻找两个有序数组的中位数 Median of Two Sorted Arrays python实现

    题目描述: 中文: 给定两个大小为 m 和 n 的有序数组 nums1 和 nums2. 请你找出这两个有序数组的中位数,并且要求算法的时间复杂度为 O(log(m + n)). 你可以假设 nums ...

  2. C++ 浅析调试,内存重叠查看

    这里举个例子查看内存, 环境为:vs 2017 测试为strcpy[因为测试老api,需要在 预处理中 添加 _CRT_SECURE_NO_WARNINGS ] 测试问题:内存溢出 源码: #incl ...

  3. Hashtable、HashMap、TreeMap、ConcurrentHashMap、ConcurrentSkipListMap区别

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11444013.html 并发场景下的Map容器使用场景 如果对数据有强一致要求,则需使用Hashtab ...

  4. Quartz.Net 任务调度之传递参数(2)

    1.jobDetail //添加 //Key:Value jobDetail.JobDataMap.Add("张翼德", "张翼德"); jobDetail.J ...

  5. easyUi-datagrid 真分页 + 工具栏添加控件

    1.  新建Pager.js /** * * @param {any} el 元素 */ function showDataGrid1(el) { $(el).datagrid({ title: '分 ...

  6. C#排列组合类,写彩票算法的朋友们可以来看一看

    public class PermutationAndCombination<T>    {        /// <summary>        /// 交换两个变量    ...

  7. 前端每日实战:77# 视频演示如何用纯 CSS 创作旗帜飘扬的动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qydvBm 可交互视频 此视频是可 ...

  8. oracle 批处理 bulk collect 带来的性能优势

    create table -- drop table tmp_20190706_220000-- truncate table tmp_20190706_220000 create table tmp ...

  9. PHP基础知识总结(四) 留言板例子 知识应用

    1.留言板显示页面:note.php <?php $host = "127.0.0.1"; $user = "root"; $pwd = "zs ...

  10. CenterOS 设置静态IP

    本文主要介绍这样再CenterOS 中设定静态IP. 工具 centerOS 6.9 步骤 执行命令:vi /etc/sysconfig/network-scripts/ifcfg-eth0 编辑,填 ...