element 点击切换按钮的颜色
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 点击切换按钮的颜色的更多相关文章
- 自动 点击切换 按钮切换 轮播无缝选项卡 ----原生js
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...
- js_常见特效——点击切换_背景颜色_收起与展开
<script src="../js/jquery-1.8.3.min.js"></script><script type="text/ja ...
- jq点击切换按钮最简洁代码
<div id="swphoto"> <img src="1.jpg"> <img src="2.jpg&q ...
- 点击jQuery Mobile的按钮改变颜色
jquery-mobile-移动 我有这样的代码来改变点击一个按钮的颜色: $('.fav').live('click', function(e) { $(this).buttonMarkup({ t ...
- jquery——左右按钮点击切换一组图片功能
一.最终效果 二.功能分析 1.需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮 ...
- 关于bxslider在点击左右按钮之后不能自动切换的问题解决
bxslider很好,但是也弄了个很脑残的设置,每次点击左右按钮之后,就不能自动切换了,要重新点击下方播放的按钮,相当不好用.问度娘没能解决,但是发现一个论坛说要修改源码,这个也找了好久,没找到,问群 ...
- 用 JS 点击左右按钮 使图片切换 - 最精简版-ljx2380000-ChinaUnix博客
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- vue点击切换颜色限制个数(用了mui框架)
vue点击切换颜色 只能点击一个 <!doctype html> <head> <meta charset="UTF-8"> <title ...
- 点击提交按钮,屏幕会出现闪烁问题,element.style问题
点击提交按钮,屏幕会出现闪烁问题 通过后台调试发现,在点击的按钮的时候会给body添加一个padding值,而且会出现怎么都修改不了的问题,会发现里面会有 element.style的值,这其实是一种 ...
随机推荐
- 力扣 -- 寻找两个有序数组的中位数 Median of Two Sorted Arrays python实现
题目描述: 中文: 给定两个大小为 m 和 n 的有序数组 nums1 和 nums2. 请你找出这两个有序数组的中位数,并且要求算法的时间复杂度为 O(log(m + n)). 你可以假设 nums ...
- C++ 浅析调试,内存重叠查看
这里举个例子查看内存, 环境为:vs 2017 测试为strcpy[因为测试老api,需要在 预处理中 添加 _CRT_SECURE_NO_WARNINGS ] 测试问题:内存溢出 源码: #incl ...
- Hashtable、HashMap、TreeMap、ConcurrentHashMap、ConcurrentSkipListMap区别
原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11444013.html 并发场景下的Map容器使用场景 如果对数据有强一致要求,则需使用Hashtab ...
- Quartz.Net 任务调度之传递参数(2)
1.jobDetail //添加 //Key:Value jobDetail.JobDataMap.Add("张翼德", "张翼德"); jobDetail.J ...
- easyUi-datagrid 真分页 + 工具栏添加控件
1. 新建Pager.js /** * * @param {any} el 元素 */ function showDataGrid1(el) { $(el).datagrid({ title: '分 ...
- C#排列组合类,写彩票算法的朋友们可以来看一看
public class PermutationAndCombination<T> { /// <summary> /// 交换两个变量 ...
- 前端每日实战:77# 视频演示如何用纯 CSS 创作旗帜飘扬的动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qydvBm 可交互视频 此视频是可 ...
- oracle 批处理 bulk collect 带来的性能优势
create table -- drop table tmp_20190706_220000-- truncate table tmp_20190706_220000 create table tmp ...
- PHP基础知识总结(四) 留言板例子 知识应用
1.留言板显示页面:note.php <?php $host = "127.0.0.1"; $user = "root"; $pwd = "zs ...
- CenterOS 设置静态IP
本文主要介绍这样再CenterOS 中设定静态IP. 工具 centerOS 6.9 步骤 执行命令:vi /etc/sysconfig/network-scripts/ifcfg-eth0 编辑,填 ...