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

最新推荐文章于 2024-06-30 11:06:07 发布

前端-文龙刚

最新推荐文章于 2024-06-30 11:06:07 发布

阅读量2.3k

点赞数 2

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_17211063/article/details/127256842

版权

Vue 专栏收录该内容

97 篇文章 2 订阅

订阅专栏

首先准备两个按钮

<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
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端-文龙刚

关注关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue实现点击两个按钮互相切换背景色

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

扫一扫

专栏目录

按钮点击背景色变化、文字颜色变化

09-26

按钮点击背景色变化、文字颜色变化,代码里将的很详细啦，绝对没问题哦

vue实现点击按钮切换背景颜色的示例代码

10-15

在Vue.js中，我们可以轻松地实现点击按钮切换背景颜色的功能。这个功能主要依赖于Vue的数据绑定和事件处理机制。以下是对给定代码的详细解释： 1. **数据绑定**：在Vue中，我们使用`v-bind`指令来绑定HTML元素的...

参与评论您还未登录，请先登录后发表或查看评论

vue-主题切换(改变背景颜色、字体颜色等)

qq_40187274的博客

05-22

279

2.在文件中使用，先引入混入，在页面开头绑定属性cssVars，css中var引用变量。1.创建cssmixin文件，里面存有混入的内容。

Vue3实现点击按钮实现文字变色

热门推荐

W25679的博客

02-28

1万+

效果图代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 改变颜色</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="app"> <div v.

vue 一个div中多个按钮, 某个按钮点击后有变色

tenc1239的博客

07-09

1373

【代码】vue 一个div中多个按钮, 某个按钮点击后有变色。

vue3自定义按钮点击变颜色（切换）

IT13333的博客

01-18

976

利用动态类名，当定义isChange数值和下标index相同时，赋予act类名，实现变色效果。实现效果图：默认选中第一个按钮，未选中按钮为粉色，点击时颜色变为红色。

Vue中button的颜色更改

qq_54657526的博客

06-03

3064

好像只有type: primary || info || success || warning || danger这五种颜色。我已经试过啦是可以变得！按钮变成红色使用的是danger，我想能不能换成red,试着换了一下，但是没有成功，页面上的按钮回到了初试默认的白色，于是我搜索了Vue颜色大全。搜到了红色的代码#FF0000可是依然不变。于是我找到了这篇博客。但是我觉得肯定不止这几个颜色，可能是我还没掌握方法。原文章中这几个颜色代表的按钮意义。primary的颜色。

Vue3自定义按钮点击变色

m0_64054560的博客

02-15

4669

vue3简单实现点击变色，默认选中第一个按钮，未选中按钮为粉色，点击时颜色变为红色

Vue主题切换源代码 vue-topic-switching

03-06

在实现主题切换时，我们需要创建一个全局可访问的主题变量，这可以通过Vue的`prototype`扩展实现。例如，在`main.js`中，我们可以添加如下代码： ```javascript Vue.prototype.$theme = 'light'; // 初始主题可以...

Vue + Scss 动态切换主题颜色实现换肤的示例代码

11-21

Vue.js结合Scss实现动态切换主题颜色是一种常见的前端设计，允许用户根据个人喜好选择系统界面的颜色风格。在本文中，我们将探讨如何通过Vue.js和Scss实现这一功能，并提供具体的步骤和示例代码。首先，我们需要对...

vue实现商城购物车功能

08-28

数量增减功能由两个`<span>`元素（一个减号，一个加号）以及中间的商品数量显示实现。`reduce(index)`和`add(index)`方法分别负责减少和增加商品数量。这些方法应该更新商品的数量并重新计算总价（`totalPrice`）和...

实现vue中原生按钮点击切换背景颜色

weixin_45458830的博客

11-28

1321

【代码】实现vue中原生按钮点击切换背景颜色。

VUE之更换背景颜色

hulinhulin的专栏

09-22

4735

Vue实现背景更换颜色操作

vue3 antd点击按钮改变按钮颜色

lpfhjw的博客

11-29

3510

vue3 antd点击按钮改变按钮颜色

vue3 改变el-button 选中的背景颜色 [vue3基础]

感谢您阅读我的博客，如果您有任何问题或建议，请随时联系我。

07-17

3567

设置el-button 高亮显示

vue开关灯效果,点击切换显示不同背景色

xx820702的博客

05-25

1698

<el-button class="selectall" :style="activeall" type="info" @click="selectall" >全选菜单</el-button > data(){ return :{ v:true } } methods..

vue点击变色

weixin_50501118的博客

08-22

5455

vue点击一个遍历后元素改变其颜色的方法，有两种情况，第一种是点击单行元素变色，点击另一行元素时，原来变色的元素变回原来的颜色，始终只有一行元素是变色的，第二种情况是点击后永久变色，点击其他元素变色不影响已经变色的元素。=index}]" @tap="btn(index)" >点击介绍...

vue点击按钮切换颜色（v-bind的使用）

曹学成的博客

10-26

1万+

vue for 循环两个按钮点击切换不同的字体颜色字体大小

05-27

好的，针对您的问题，可以参考如下思路： 1. 在 Vue 中，我们可以使用 `v-for` 指令来遍历数组，生成对应的元素。 2. 对于按钮的点击事件，我们可以使用 `@click` 来监听，并在对应的方法中修改响应式数据，从而实现样式的切换。综上，我们可以编写如下代码来实现点击按钮切换不同的字体颜色和字体大小： ```html <template> <div> <p v-for="(style, index) in styles" :key="index" :class="style.className">{{ text }}</p> <div> <button v-for="(style, index) in styles" :key="index" @click="setActive(index)">{{ style.name }}</button> </div> </div> </template> <script> export default { data() { return { text: 'Hello, World!', styles: [ { name: '默认样式', className: 'text1' }, { name: '红色字体', className: 'text2' }, { name: '大号字体', className: 'text3' }, ], activeIndex: 0, }; }, methods: { setActive(index) { this.activeIndex = index; }, }, computed: { activeStyle() { return this.styles[this.activeIndex]; }, }, }; </script> <style> p { font-size: 16px; } .text1 { color: black; } .text2 { color: red; } .text3 { font-size: 24px; } </style> ``` 在上述代码中，我们使用了 `v-for` 指令来遍历 `styles` 数组，生成对应的 `<p>` 元素和按钮。我们为每个 `<p>` 元素绑定了对应的类名，这些类名由 `styles` 数组中的对象的 `className` 属性决定。我们为这些类名分别定义了不同的样式，例如 `text1` 对应黑色字体，`text2` 对应红色字体，`text3` 对应更大的字号。在需要时，我们通过修改 `activeIndex` 的值来切换不同的样式，从而实现不同的样式效果。我们为每个按钮绑定 `@click` 事件，并在对应的方法中修改 `activeIndex` 的值，从而实现样式的切换。最后，我们使用了一个计算属性 `activeStyle`，根据 `activeIndex` 的值返回当前应该使用的样式对象，以便在模板中动态绑定类名。