程序员经验分享-hwhale

vue实现点击两个按钮互相切换背景色

2023-11-09

首先准备两个按钮

<el-button :class="{active:dayIndex==0}" @click="selectDay(0)">今日</el-button>
<el-button :class="{active:dayIndex==1}" @click="selectDay(1)">昨日</el-button>

active：是定义的样式名称

dayIndex：默认选中的下标

selectDay：定义的点击方法名，并传递其下标

data中定义默认选中的下标

dayIndex:0

 JS方法：

selectDay(e){
    this.dayIndex=e
}

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vue

vuejs

javascript

前端

vue实现点击两个按钮互相切换背景色 的相关文章

随机推荐

  • 伺服电机三环（电流环、速度环、位置环）控制原理及参数调节

    原文 https blog csdn net sunjiajiang article details 8252026 运动伺服一般都是三环控制系统 从内到外依次是电流环 速度环 位置环 1 电流环 电流环的输入是速度环PID调节后的输出 我

  • 设计模式（四） 建造者模式

    建造者模式和工厂模式类似 也是一种创建型模式 它们的主要区别在于 工厂模式需要提供一些信息 而对象在最后一步才创建 而建造者模式则是一步一步的创建对象 一个非常典型的建造者的例子是Java中的StringBuilder 通过一步一步的添加字

  • Journal of Proteome Research

    期刊名 Journal of Proteome Research 发表时间 2019年9月 IF 3 78 2018 单位 巴塞尔大学 瑞士 物种 人细胞系 技术 冷冻电子显微镜 Cryo EM 单粒子电子显微镜 一 概述 本文描述了一种

  • C语言的字符串查找函数

    C C string库 string h 提供了几个字符串查找函数 如下 memchr 在指定内存里定位给定字符 strchr 在指定字符串里定位给定字符 strcspn 返回在字符串str1里找到字符串str2里的任意一个字符之前已查找的

  • arma模型matlab代码_时间序列分析ARMA模型（金融计量一）

    以下内容为原创 如有错误请联系纠正 联系作者方式 微信公众号 计量文学 公众号会发布计量学相关文章 软件安装教程 公众号刚起步 希望多多支持 作业说明 1 给出原序列折线图 并加以文字描述 2 给出原序列或差分序列 如果有需要 的自相关函数

  • 深入剖析Kubernetes之声明式 API

    文章目录 声明式 API 编写自定义控制器 声明式 API 到底什么才是 声明式 API 呢 kubectl apply 命令 kubectl replace 的执行过程 是使用新的 YAML 文件中的 API 对象 替换原有的 API 对

  • Vue-Router总结

    路由三大组成部分 router link 导航 link 标签 router view 路由视图 路由页面呈现的地方 new VueRouter 路由配置 routes router link属性 1 to进行页面跳转 更改路径 2 tag

  • 着手MQTT.fx软件应用，利于深入了解MQTT协议数据连接、传递、订阅/发布流程

    第一步 Extras gt Edit connection 第二步 添加连接信息 第三步 选择连接的服务器 第四步 点击连接 成功就变为绿色 第五步 订阅 第六步 发布 第七步 查看订阅数据 这大致就是一个基本的使用过程 MQTT fx的下

  • 软件工程毕业设计题目合集【含源码+论文】

    文章目录 前言 题目1 基于SSM的房屋出租出售系统 br 题目2 基于SSM的房屋租赁系统 br 题目3 基于SSM的个人健康信息管理系统 br 题目4 基于SSM的共享充电宝管理系统 br 题目5 基于SSM的即动运动网站 br 前言

  • 操作系统期末整理！！！重要！！

    操作系统 期末可以过啦 第一章 操作系统引论 1 操作系统的定义 2 操作系统的作用 3 操作系统发展过程 4 各类型操作系统的特点 5 操作系统的基本特征 6 操作系统的基本功能 7 异常和中断的区别 8 为什么说中断是操作系统的核心技术

  • Keil报: warning: #223-D: function “某某某“ declared implicitly 的警告，三个解决方法

    原因 找不到 某某某 函数 解决 看有没有 include 相关头文件 看函数定义有没有出错 函数定义有一点不同就会出现上述原因 我个人遇到的比较奇葩的原因 emmm 人比较奇葩吧 在两个不同的 h文件中写了相同的 ifndef INA H

  • led灯条串联图_三分钟学会DIY个性LED灯

    上篇文章介绍了LED光源 主要介绍LED结构 常用参数 型号 常见品牌等内容 回看的小伙伴请点击照明灯饰专栏 今天主要介绍LED灯的工作原理与常见的LED灯 明白之后DIY自己的个性LED毫无压力 先别跳过下面有干货 一 LED驱动 上篇文

  • GoogLeNet论文阅读笔记

    目录 前言 GoogLeNet论文阅读笔记 Abstract 1 Introduction 2 Related Work 3 Motivation and High Level Considerations 4 Architectural

  • 上升沿_输入输出的上升沿和下降沿是怎么来的，一起看看

    高电平 低电平 上升沿和下降沿的区别 数字电路中 电平从低电平 逻辑信号为0 变为高电平 逻辑信号为1 的那一瞬间叫作上升沿 电平从高电平 逻辑信号为1 变为低电平 逻辑信号为0 的那一瞬间叫作下降沿 高电平触发 是指I O口电平为高电平时

  • Java实现给定两个 int 变量, 交换变量的值

    给定两个 int 变量 交换变量的值 1 创建变量i实现交换 2 不创建临时变量利用加减法实现 public class Solution public static void main String args int a 10 int b

  • C++ C2460 error

    关于该错误的官方说明 https msdn microsoft com en us library 1kf0205c aspx 结构形如 identifier1 uses identifier2 类或结构 identifier2 被声明为其

  • django中的跨域问题以及解决策略

    目录 跨域请求 同源策略 CORS 跨域资源共享 简介 CORS基本流程 解决跨域问题的方法 CORS两种请求详解 预检 解决跨域问题 服务端 简单请求 非简单请求 解决跨域问题 第三方 后端配置 解决跨域问题 前端 跨域请求 跨域是指浏览

  • Object Detection网络框架学习:Faster-RCNN

    经过RCNN和Fast RCNN的积淀 Ross B Girshick在2016年提出了新的Faster RCNN 在结构上 Faster RCN已经将特征抽取 feature extraction proposal提取 bounding

  • Linux找回root密码(Centos 7)

    首先 启动系统 进入开机界面 在界面中按 e 进入编辑界面 手速一定要快 进入编辑界面 使用键盘上的上下键把光标往下移动 找到以 Linux16 开头内容所在的行数 把光标移动到最尾部 在行的最后面输入 init bin sh 接着 输入完

  • vue实现点击两个按钮互相切换背景色

    首先准备两个按钮

热门标签