vue 点击切换动态Class变化,实现当前样式改变

最新推荐文章于 2025-06-11 19:50:48 发布
最新推荐文章于 2025-06-11 19:50:48 发布
阅读量2.1w 收藏 28
点赞数 7
CC 4.0 BY-SA版权
文章标签： vue 动态切换class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/MYuanFang/article/details/94381357
本文介绍了一种在网页中实现元素点击时高亮显示的方法。通过在data中增加变量来记录点击状态，并在template中使用@click事件传递索引，更新data中的值。最后，在style中定义高亮样式的类，使选中的元素视觉效果突出。

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

一、先在data里增加一个变量，用来储存当前点击的元素
 

return {

    leftColorDisplay: 0, // 0为默认选择第一个，-1为不选择

};

 二、在template里面的代码，切记在@click方法里面要传index，

三、点击事件：改变data里面leftIndex的值

 

四、在style中写上 .leftColorChang样式

五、效果图

如果你的需求和我一样请加以上俩个标签你也可以试下加与不加的效果区别。

webYin
关注
根据时间显示问候语(Vue)
weixin_45743297的博客
01-03 2525
废话少说,看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
class根据状态 vue_vue 动态改变 class 属性
weixin_39722375的博客
12-20 2108
学习vue，做一个小demo，第一步需求是点击相应的色块会变色，再次点击会还原。当时思想是在 data 中用一个数组去记录每个色块的点击状态，在组件上绑定该数组，从而动态改变 class ，但是实际上 class 并没有动态改变。效果图.png代码如下：six-in-nine-vue.htmlsix-in-nine-vue:class="{'default-color': !clicked_lis...
Vue 实现v-for循环的时候更改 class的样式名称
10-15
主要介绍了Vue 实现v-for循环的时候更改 class的样式名称，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue改变class样式
qq_27577113的博客
12-24 6685
vue改变class样式 首先，定义了样式 .change{ height: 100px; width: 100px; line-height: 100px; background-color: #ff0000; border-radius: 50%; text-align: center; ...
Vue 动态绑定 class 简单讲解
最新发布
全局可见
06-11 2285
Vue 的:class动态绑定，通过数组语法（组合类名）和对象语法（控制类名开关），让 CSS 类名随数据变化灵活更新，轻松实现样式的动态切换，是前端开发中控制元素外观的常用手段。
Vue修改class样式
无心
06-27 3665
无
Vue动态切换class样式
脉脉情缘的博客
01-31 2633
可以传给 v-bind:class 一个对象，以动态地切换class： <div v-bind:class="{ active: isActive }"></div> 上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness（所有的值都是真实的，除了false,0,“”,null,undefined和NaN）。 可以在对象中传入更多属性来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 clas
Vue 通过style属性、class属性来动态修改CSS样式
热门推荐
weixin_43818307的博客
07-11 2万+
vue使用v-bind绑定style属性或class属性，动态修改CSS样式。动态修改style，动态修改class。
Vue点击切换Class变化,实现Active当前样式操作
10-15
以上就是使用Vue实现点击切换Class变化以及Active当前样式操作的基本方法。通过这种方式，你可以轻松地在Vue应用中创建具有动态样式的交互元素，提高用户体验。记得在实际开发中，根据项目需求灵活调整和扩展这些...
vue2.0中click点击当前li实现动态切换class
08-30
"Vue 2.0 中点击当前 li 实现动态切换 class" 在 Vue 2.0 中，如何点击当前 li 实现动态切换 class 是一个非常重要的知识点。本文将详细介绍如何使用 Vue 2.0 实现点击当前 li 实现动态切换 class。 首先，让我们...
vue实现样式之间的切换及vue动态样式的实现方法
08-28
"Vue 实现样式之间的切换及 Vue 动态样式的实现方法" Vue 实现样式之间的切换是指在 Vue 项目中实现不同的样式之间的切换，例如导航栏的样式切换功能。这种方式可以通过 Vue 的动态样式实现方法来实现。下面将详细...
Vue 实现改变当前点击Class 样式、改变多个点击Class样式 实例 解析
Bnana博客
05-23 4259
Vue 实现改变当前点击Class 样式、改变多个点击Class样式 实例 解析 文章概览 1：改变当前点击class 样式 2：改变多个点击class 样式 一、改变当前点击Class样式 实现思路：:class 动态判断样式 实例 template <template> <div> <ul v-for="(value,index) in values"> <li @click="cg_current_index(inde..
vue通过style或者class改变样式的实例代码
10-17
主要介绍了vue通过style或者class改变样式的实例代码，在文中给大家提到了vue的一些样式(class/style)绑定,需要的朋友可以参考下
Vue中设置class类样式
2301_76232361的博客
04-08 660
可以发现:class="[‘thin’,‘red’,‘italic’,‘active’]"的写法和class="thin red italic active"的效果时一样的，甚至。2、三元表达式。
vue elementui el-button点击切换class
weixin_39543986的博客
11-15 2353
html <el-button :type="0 == quaflat ? 'primary':''" @click="getlisttable(0)">夏天</el-button> <el-button :type="1 == quaflat ? 'primary':''" @click="getlisttable(1)">秋天</el-button...
vue切换class_Vue点击切换Class变化,实现Active当前样式操作
weixin_39928736的博客
12-20 507
刚入门Vue没多久，在制作过程中遇到很多简单实用的小技巧。没有太多的墨水，直接上代码：一、先在data里增加一个变量，用来储存当前点击的元素data() {return {activeClass: -1, // 0为默认选择第一个，-1为不选择};},二、在Template里面的代码，切记在@click方法里面要传index，{{itme.text}}三、点击事件：改变data里面activeCl...
Elementui 的按钮el-button点击切换class
u011200562的博客
04-08 6415
完整代码 <template> <div class="type-check"> <el-button :type="0==display?'success':'default'" size="mini" @click="displayCheck(0)">表格 </el-button> <el-button :ty...
vue动态改变当前样式(css)
95后独自打拼的程序猿
03-20 4318
文章目录前言一、要怎么做？二、使用步骤1.首先，在data中要有样式数据2.在computed中添加这段代码3.在需要改变样式的地方添加总结 前言 例如：项目中我们需要动态改变当前页面的样式 一、要怎么做？ 示例：1.首先我们要拿到数据中背景图数据 2.然后在你需要的添加背景图div出添加定义的style 二、使用步骤 1.首先，在data中要有样式数据 代码如下（示例）： data: { //动态背景图片 leftStyle: { background: "#AF7F3F" } } 2.在c
vue点击样式切换（class
01-18
### 实现点击事件触发 Class 切换 在 Vue.js 中，可以通过绑定 `class` 属性并利用数据属性来动态控制元素的样式。当发生点击事件时，更新组件的数据属性即可自动反映到视图上。 对于简单的类切换操作，推荐使用对象语法或数组语法来进行条件渲染： #### 对象语法示例 ```html <div :class="{ active: isActive }" @click="toggleClass"></div> ``` ```javascript export default { data() { return { isActive: false, }; }, methods: { toggleClass() { this.isActive = !this.isActive; } } } ``` 此方法允许更灵活地管理多个类的状态[^1]。 另一种方式是在列表项中应用唯一的标识符作为索引来跟踪哪个项目被激活: #### 使用索引追踪活动状态 ```html <ul> <li v-for="(item, index) in items" :key="index" :class="{ 'is-active': currentIndex === index}" @click="updateIndex(index)"> {{ item }} </li> </ul> ``` ```javascript export default { data(){ return{ currentIndex: null, items: ['Item One', 'Item Two'] } }, methods:{ updateIndex(newIndex){ this.currentIndex = newIndex; } } }; ``` 这种方式特别适合处理导航栏或其他需要高亮显示选中的场景。 此外，在某些情况下可能还需要直接操纵DOM节点上的内联样式，但这通常不是首选方案；如果确实有必要这样做，则可以借助 `$refs` 来访问特定 DOM 节点，并在其上设置 style 属性[^2]。 然而需要注意的是，这种方法不如前两种优雅且容易维护，因此仅应在特殊需求下考虑采用。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值