vue点击当前按钮变色

最新推荐文章于 2024-01-18 18:27:49 发布

--北海道的夏天不会说再见--

最新推荐文章于 2024-01-18 18:27:49 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/lonsole/article/details/119908524

本文介绍如何在Vue项目中实现按钮被点击时改变颜色的效果，通过绑定点击事件和CSS样式实现动态交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div>
    <div>
      <ul class="year-wrap">
        <li v-for="item,index in lis" :key="index"><Button :class="{ active:changeBackground == index }" @click="changeItem(item.id)">{
   
   {
   
   item.title}

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

--北海道的夏天不会说再见--

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

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

m0_62785037的博客

06-30

1504

Vue3实现点击按钮实现文字变色方法，如动态样式、动态类名

导航栏中各按钮在点击当前按钮变色其他按钮恢复为原有色的实现方法（vue、jq、原生js）...

weixin_34186128的博客

04-11

3867

一、vue如何实现？代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7...

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

vue点击变色

weixin_50501118的博客

08-22

5604

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

vue 点击按钮改变颜色

lzfengquan的博客

02-17

4154

代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>vue空白模板</title> <link href="https:/.

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

10-15

主要介绍了用vue简单的实现点击按钮切换背景颜色，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

vue实现点击某个标签元素，该标签元素显示红色

那就这样吧~

12-14

1607

案例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .active { color: red; } </style> </head> <body> <div id="app"> <

Vue实现点击后文字变色切换方法

08-28

Vue实现点击后文字变色切换方法 Vue框架是当前最流行的前端框架之一，具有强大的功能和灵活的开发体验。其中，实现点击后文字变色切换方法是非常常见的一种交互式效果，本文将详细介绍如何使用Vue实现点击后文字...

vue循环中点击选中再点击取消(单选)的实现

10-14

在这个例子中，`tocomment` 函数接收索引作为参数，如果当前点击的索引与已选中的索引不同，则将当前索引设为选中，否则取消选中。 ```javascript methods: { change() { // 处理评论输入框内容变化 if (this....

点击A标签后当前a变色，其它的不变色

06-26

点击A标签后当前a变色，其它的不变色,让被点击的高亮显示

vue 点击变色(li div )

cjj123580的博客

06-29

532

【代码】vue 点击变色(li div )

Vue3自定义按钮点击变色

m0_64054560的博客

02-15

5051

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

前端----Vue的学习：简单的点击变色

WdxOvO17的博客

10-18

649

在Vue的data中传入数组，然后在li标签中执行v-for循环，让他渲染在li标签里，然后，绑定点击函数，最后动态绑定。直接上代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .active { color: #f00; } </st

vue实现列表点击变色

天宇宇宇宇宇a的博客

06-19

1680

vue实现鼠标点击改变颜色

big_pig_sir的博客

07-15

6208

vue实现鼠标点击改变颜色。

vue3自定义按钮点击变颜色实现（多选功能）

IT13333的博客

01-18

1744

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

vue实现点击变色再次点击变回来，让你的页面变得更加动态

最新发布

09-13

以下是一个简单的Vue.js示例代码，它实现了您所描述的功能： ```html <template> <div id="app"> <button v-for="button in buttons" :key="button.id" :class="{ active: button.isActive }" @click="toggleButton(button)" > {{ button.text }} </button> </div> </template> <script> export default { data() { return { buttons: [ { id: 1, text: '按钮1', isActive: false }, { id: 2, text: '按钮2', isActive: false }, { id: 3, text: '按钮3', isActive: false }, { id: 4, text: '按钮4', isActive: false }, { id: 5, text: '按钮5', isActive: false } ] }; }, methods: { toggleButton(selectedButton) { // 首先关闭所有按钮的激活状态 this.buttons.forEach(button => { button.isActive = false; }); // 激活被点击的按钮 selectedButton.isActive = true; } } }; </script> <style> .active { color: red; /* 被点击按钮的颜色 */ } button { margin-right: 10px; /* 按钮间的间距 */ } </style> ``` 在这个例子中，我们定义了一个Vue组件，它有一个`buttons`数组，用于存储按钮的信息，包括其文本和是否处于激活状态。每个按钮都有一个`v-for`指令来重复渲染按钮列表，并且每个按钮都有一个`@click`事件处理器`toggleButton`。当按钮被点击时，`toggleButton`方法会将所有按钮的`isActive`状态设置为`false`，然后只将当前点击的按钮的`isActive`设置为`true`。在`<style>`部分定义了`.active`类，它会将按钮的文本颜色改为红色。