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的值,这其实是一种 ...
随机推荐
- 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 ...
- OpenCV常用基本处理函数(7)图像金字塔和直方图
高斯金字塔 高斯金字塔的顶部是通过将底部图像中的连续的行和列去除得到的.顶部图像中的每个像素值等于下一层图像中 5 个像素的高斯加权平均值. 这样操作一次一个 MxN 的图像就变成了一个 M/2xN/ ...
- Mybatis基于SqlSession实现CRUD
之前我们讲的基于XML还是接口注解配置都是使用接口实现CRUD,本文我们将要讲解通过splsession来实现CRUD,这种方法比较灵活. 基本配置 <!-- spring和MyBatis完美整 ...
- 阿里云 Centos 7 PHP7环境配置 LNMP
首先更新系统软件 $ yum update 安装nginx 1.安装nginx源 $ yum localinstall http://nginx.org/packages/centos/7/noarc ...
- 高精度小数BigDecimal+二分——java
高精度小数第一题 import java.util.*; import java.math.*; public class Main { public static void main(String ...
- Database基础(六):实现MySQL读写分离、MySQL性能调优
一.实现MySQL读写分离 目标: 本案例要求配置2台MySQL服务器+1台代理服务器,实现MySQL代理的读写分离: 用户只需要访问MySQL代理服务器,而实际的SQL查询.写入操作交给后台的2台M ...
- if语句里面continue和break的区别
break:结束整个循环体 continue:结束本次循环 代码说明: public static void main(String[] args) { int x=0; while(x++ < ...
- python读取数据库mysql报错
昨天在学习PYTHON读取数据库的知识时,一直在报错,找不到原因. 最后同事说是语法错误. import sysreload(sys)sys.setdefaultencoding('gb18030') ...
- Tomcat负载均衡、调优核心应用进阶学习笔记(一):tomcat文件目录、页面、架构组件详解、tomcat运行方式、组件介绍、tomcat管理
文章目录 tomcat文件目录 bin conf lib logs temp webapps work 页面 架构组件详解 tomcat运行方式 组件介绍 tomcat管理 tomcat文件目录 ➜ ...
- LightOJ 1030 Discovering Gold (概率/期望DP)
题目链接:LightOJ - 1030 Description You are in a cave, a long cave! The cave can be represented by a \(1 ...