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

最新推荐文章于 2024-06-20 10:43:02 发布
最新推荐文章于 2024-06-20 10:43:02 发布
阅读量2.1w 收藏 28
点赞数 7
文章标签： vue 动态切换class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MYuanFang/article/details/94381357
版权

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

return {

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

};

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

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

 

四、在style中写上 .leftColorChang样式

五、效果图

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

webYin
关注
  • 7
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Elementui 的按钮el-button点击切换class
u011200562的博客
04-08 6200
完整代码 <template> <div class="type-check"> <el-button :type="0==display?'success':'default'" size="mini" @click="displayCheck(0)">表格 </el-button> <el-button :ty...
Vue 实现改变当前点击Class 样式、改变多个点击Class样式 实例 解析
Bnana博客
05-23 3910
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修改class样式
无心
06-27 3582
无
vue动态绑定class的几种方式
最新发布
weixin_55209970的博客
06-20 709
方法和计算属性在Vue3中都可以用于处理和操作数据，但它们在使用和性能上有一些关键的区别。计算属性是一种具有缓存机制的响应式对象，只有当其依赖的数据发生变化时才会重新计算。而方法没有缓存机制，每次页面更新时都会重新执行，无论数据是否变化。虽然方法和计算属性得到的结果一样 还是要多使用计算属性？
Vue中设置class类样式
qq_39055970的博客
05-23 9631
vue中通过属性绑定为元素设置class类样式vue中class类样式的4种绑定方式1、数组2、三元表达式3、数组嵌套对象4、直接使用对象 vue中class类样式的4种绑定方式 1、数组 <h1 :class="['thin','red','italic','active']">你看这个碗，他又大又圆！</h1> 实例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charse
Vue点击切换Class变化，实现Active当前样式
热门推荐
D船长的博客
08-12 3万+
刚入门Vue没多久，在制作过程中遇到很多简单实用的小技巧。 没有太多的墨水，直接上代码：   一、先在data里增加一个变量，用来储存当前点击的元素 data() { return { activeClass: -1, // 0为默认选择第一个，-1为不选择 }; },  二、在Template里面的代码，切记在@click方法里面要传index， ...
vue切换class_Vue点击切换Class变化,实现Active当前样式操作
weixin_39928736的博客
12-20 425
刚入门Vue没多久，在制作过程中遇到很多简单实用的小技巧。没有太多的墨水，直接上代码：一、先在data里增加一个变量，用来储存当前点击的元素data() {return {activeClass: -1, // 0为默认选择第一个，-1为不选择};},二、在Template里面的代码，切记在@click方法里面要传index，{{itme.text}}三、点击事件：改变data里面activeCl...
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改变样式
qq_37899622的博客
09-27 2161
鼠标事件通过class改变样式，即鼠标移上去和移开时，元素的样式不同。 ①首先，添加鼠标事件： @mouseover="mouseOver($event)" @mouseleave="mouseLeave($event)" ②实现这两个方法： mouseOver ($event) { $event.currentTarget.className = 'active' }, mouseLeave ($event) { $event.currentTarget.className = 'scroll
vue点击切换class改变样式
zhengyun1568的博客
10-31 1079
原文链接https://www.cnblogs.com/xueweijie/p/6861702.html .iconColor{ color: #409EFF; } <li v-for="(item, index) in list" :key="index"> {{item.date}} <i v-show="item.value.length>0" class="...
vue绑定class实现当前列表项的样式切换
柳宁依的博客
08-09 3889
&lt;div v-bind:class="{ active: isActive }"&gt;&lt;/div&gt;当isActive为真时，该div会有active类的样式，否则，没有。   v-for循环生成列表，当点击列表时，将被点击的那个列表的索引值存储在num中，即num值即为当前列表的索引值。 再依照class绑定的样式的条件num==index,就会只有索引值为num的列表才...
前端魔法：掌握动态 class，让网页元素随心所欲
Shids_的博客
03-30 8124
前端魔法：掌握动态 class，让网页元素随心所欲
vue 点击谁 谁变色
Cousin__的博客
05-21 5293
vue 点击谁 让谁变色（添加class属性）改变当前元素的样式 1.先设置一下要点中的样式 <style> .active { border: 6px solid #ff6c00; color: #ff6c00; background: #fff7e9; } </style> 2. 然后就可以给我们的 li 添加点击事件 <ul id="app"> <li v-for='(item,index) in items' ...
vue后台项目中通过id实现增添按钮和修改按钮的灵活切换
qq_52526079的博客
05-08 841
当使用resetFields置空表单时，他只是将data里面的数据置为初始值，并不是置空，而id是服务器传过来的，因此不能置为初始值， 需要手动置空this.tmForm.id='';'修改品牌' : '添加品牌'" :visible.sync="dialogVisible" width="50%"此时会出现点击修改按钮能正常显示修改品牌，但是再点击添加按钮时，这时因为id未置空，还是出现修改按钮的情况。然后实现了通过判断有无id来实现增添品牌和修改品牌的切换。这是template的里面的代码。
在vue使用class选择器和下标更改点击列表样式
m0_73481765的博客
10-18 798
语法中，您可以使用class和下标来更改点击项的样式。当用户点击某个选项时，该选项会添加。类名，从而可以应用特定的样式来表示选中状态。部分导入所需的响应式API和定义需要使用的变量。类名，用于显示选中状态。同时，我们绑定了点击事件。函数会接收被点击选项的下标作为参数，并将其赋值给。，当用户点击某个选项时，会调用。，从而实现选中项样式的更改。如果您正在使用Vue 3的。最后，您可以在样式表中定义。通过上述步骤，在Vue使用。类名来设置选中项的样式。语法中的变量引用需要使用。在上述代码中，我们使用。
vue 点击改变class样式
07-22
在Vue中，你可以使用绑定:class指令来根据点击事件来改变元素的class样式。以下是一个示例： ```html <template> <div> <button @click="changeClass">点击切换样式</button> <div :class="{'active': isActive}">这是一个示例</div> </div> </template> <script> export default { data() { return { isActive: false } }, methods: { changeClass() { this.isActive = !this.isActive; } } } </script> <style> .active { color: red; font-weight: bold; } </style> ``` 在上面的示例中，我们使用绑定:class指令来动态切换元素的class样式。当按钮被点击时，会调用`changeClass`方法来改变`isActive`的值，从而改变元素的class样式。 我们定义了一个名为`active`的样式类，当`isActive`为true时，元素会应用该样式类，当`isActive`为false时，样式类将被移除。 通过这种方式，你可以根据需要在Vue中动态改变元素的class样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值