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=‘‘;
   }

  效果:

原文地址:https://www.cnblogs.com/guangzhou11/p/9934881.html

时间: 2024-10-19 14:38:04

element 点击切换按钮的颜色的相关文章

解决基于JQ焦点图快速点击切换按钮图片显示错误的问题

之前用原生js做过焦点图,今天突然想用JQ做一下,但是遇到一个问题,当我不停点击切换按钮时,由于不停触发animate动画,导致图片显示错乱的问题,解决办法第一想到的就是点击切换后立刻解绑事件,然后动画函数运行完再添加事件,但是 ....用 $('.box').unbind('click'); 解绑后,再把原有事件添加回来却没有办法添加回来 $("button").bind("click",function(){ //函数体 }); 这样?可是函数体里没法写 ,可能

自动 点击切换 按钮切换 轮播无缝选项卡 ----原生js

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="author" content="智能社 - zhinengshe.com" /> 6 <meta name="copyright" content="智能社 - zhinengshe.com"

js_常见特效——点击切换_背景颜色_收起与展开

<script src="../js/jquery-1.8.3.min.js"></script><script type="text/javascript">$(function(){        //左侧导航切换    $(".a").click(function(){        $(".active").removeClass("active");      

点击jQuery Mobile的按钮改变颜色

jquery-mobile-移动 我有这样的代码来改变点击一个按钮的颜色: $('.fav').live('click', function(e) { $(this).buttonMarkup({ theme: "b" }); }); 我怎样才能再次单击该按钮返回到正常颜色(C)? 有没有办法看到一个按钮的状态? 因为它是活的,那么你可以只让自己的切换: $('.fav').live('click', function() { var dotoggle = $(this).attr(&

用户界面框架jQuery EasyUI示例大全之切换按钮和分页演示

<jQuery EasyUI最新试用版免费下载> jQuery EasyUI致力于帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.jQuery EasyUI提供了基于当下流行的jQuery core和HTML5的控件,助您打造适合当今网络的应用程序. 基本的切换按钮 本演示主要展示了基本的切换按钮,点击切换按钮来改变其状态.[另附源代码供大家参考] |在线Demo 切换按钮操作 本演示主要展示了切换按钮操作,点击按钮来执行操作.[另附源代码供大家参考] |在线Demo 基本的分页 本

点击同一按钮实现div的隐藏与现实切换

点击同一按钮实现div的隐藏与现实切换:在很多应用中,都有这样的功能,点击同一个按钮可以实现div的隐藏或者现实,当然操作的并非必须是按钮或者div,不过原理是一样的,下面就通过代码实例介绍一下如何实现此功能.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://ww

UI第四讲.事件处理(按钮点击切换视图,触摸事件)

一.按钮点击切换视图(例题) 二.事件的基本概念 三.触摸的基本概念 四.响应者链

请编写&quot;改变颜色&quot;、&quot;改变宽高&quot;、&quot;隐藏内容&quot;、&quot;显示内容&quot;、&quot;取消设置&quot;的函数,点击相应按钮执行相应操作,点击&quot;取消设置&quot;按钮后,提示是否取消设置,如是执行操作,否则不做操作

<!DOCTYPE HTML><html><head><meta http-equiv="txttent-Type" txttent="text/html; charset=utf-8" /><title>javascript</title><style type="text/css">body{font-size:12px;}#txt{ height:400px

关于bxslider在点击左右按钮之后不能自动切换的问题解决

bxslider很好,但是也弄了个很脑残的设置,每次点击左右按钮之后,就不能自动切换了,要重新点击下方播放的按钮,相当不好用.问度娘没能解决,但是发现一个论坛说要修改源码,这个也找了好久,没找到,问群友,但是都顾着妹子,没理我这屌丝.... 最后还是得感谢firebug神奇,直接通过查找影响左右按钮和page小圆圈的jquery事件,找到了源码位置,直接去了stopAuto(),这个方法就可以了,如图位置