vue多选添加class再次点击移除

最新推荐文章于 2021-11-22 11:14:14 发布
最新推荐文章于 2021-11-22 11:14:14 发布
阅读量1.3k 收藏 5
点赞数 2
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42977004/article/details/111872846
版权
本文介绍如何在Vue.js应用中使用includes()方法动态地为多选元素添加和移除class。通过判断元素的name属性，实现点击事件下的class管理。
摘要由CSDN通过智能技术生成

利用includes()匹配来实现，匹配name和 i 都可以 ，我这里选择name

<ul>
    <li v-for="(item,i) in allDefectList" :key="i" @click="
最低0.47元/天 解锁文章
zt-records
关注
专栏目录
vue实现单击选中再次单击取消
wupinlong的博客
07-07 3564
使用场景： 当你写一个v-for循环出一个列表，在写一个点击事件，点击之后给一个class，列表某一个颜色突出，在点击取消颜色突出的场景 1.选中赋值的变量不是数组时 -------html <div :class="['recentOrderBut',recentOrdersArray == item.value ? 'recentOrderActive' : '', ]" v-for="item in recentOrdersDic" :key="item.value" @clic
vue--点击当前增加class,其他删除class的方法
10-18
今天小编就为大家分享一篇vue--点击当前增加class,其他删除class的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中点击添加class，双击去掉class
aoqusui6509的博客
05-14 570
VUE中 html 中 <ul id="shoppingList" v-on:click="addClass($event)" class="iview-admin-draggable-list"> 　　<li></li> </ul> 点击li时 js如下 addClass:function(e){ 　　cons...
vue 点击后动态绑定、删除class
qq_42504266的博客
11-22 6439
需求是点击按钮切换部分显示内容，并显示不同的class样式 之前遇到的动态添加class及删除同级class的需求比较多，在这里记录一下此类情况~ 点击切换内容，改变删除原有class,新增class 切换按钮 <el-button class="title_btn" type="primary" icon="el-icon-set-up" @click="changaView"> 切换显示模式 </el-button> 动态绑定class .
vue-点击添加class 其他标签删除class
疏雨萧萧千行泪
11-15 2103
class &amp;&amp; style 用法 &lt;div id="app"&gt; &lt;grid :cols="2" style="margin: 0 -1px -1px;"&gt; &lt;grid-item class="reset-p" :class="{active: i == active}"
关于vue选中按钮判断样式包括点击添加再点击去掉
牛先森家的博客
11-13 2232
关于vue选中按钮判断样式包括点击添加再点击去掉 <!-- 区域 --> <div class="size-box"> <div class="size-title fs-24 flex-center"> <span class="color-333 fs-24">{{currentArea.size}}</span>
vue实现自定义多选按钮
10-15
在本文中，将详细探讨如何使用Vue.js来实现自定义多选按钮。 首先，实现自定义多选按钮主要分为HTML结构设计、CSS样式定义以及Vue.js的JavaScript逻辑编写三大部分。 对于HTML结构设计，通常会使用`v-for`指令来...
vue例子（实现单选、多选、弹窗等功能）
07-24
在这里，`selectedOptions`是一个数组，用户选择的每个选项值会被添加或移除。 接下来，弹窗（Modal）是Web应用中常见的交互元素，用于显示临时通知、确认对话或者更复杂的内容。在Vue中，我们可以创建一个自定义...
vue循环中点击选中再点击取消(单选)的实现
10-14
如果需要实现多选功能，可以改用一个数组（如 `selectedItems`）来存储选中的项的索引，点击时将当前索引添加或移除。同时，可以使用 `v-bind:class` 的数组语法来检查索引是否存在于数组中，决定是否应用选中样式...
vue实现点击追加选中样式效果
10-16
在Vue.js中，实现点击元素追加选中样式是一种常见的交互设计，这使得用户能够清晰地看到当前选中的状态。本文将详细介绍如何在Vue中通过数据绑定和事件监听来实现这个功能。 首先，我们需要在HTML模板中定义一个...
vue–点击当前增加class,其他删除class的方法
12-29
如下所示： <div id=app> <p v-for='(data,key,index) in datas' v-on:click=addClassFun(index) v-bind:class='{class1:index==qwerqwre}'>{{data.data}}</p> </div> [removed] new Vue({ el: '#app', data: { datas: { data1: { data: 测试1, ifAdd: 0 }, data2: { data: 测试2, ifAdd: 1 }, data3: { data: 测试3, ifAdd:
vue--点击当前增加class，其他删除class
John的专栏
04-10 8587
转载自：http://blog.csdn.net/xiao_yu_liu/article/details/55515244 div id="app">   p v-for='(data,key,index) in datas' v-on:click="addClassFun(index)" v-bind:class='{class1:index==qwerqwre}'>{{data.data}
vue 中移除没有使用的class和id 样式
张小胖
05-10 1645
前言 因为在多次迭代后的项目有很多不用的样式，如果一直留着就会导致文件过大，在用户访问的时候请求时间加大，所以需要优化这方面的代码 所以我这边在项目 build 的时候，就需要移除多余不用的样式代码进行简单的优化 npm安装与使用 1、使用到的npm包有 “purifycss-webpack”，“purify-css”，“glob” cnpm i --save purifycss-webpack purify-css glob 2、在 webpack.config.js 或...
jquery点击加class再次点击移除添加的class
龚清林的博客
10-12 7314
toggleClass方法可以实现对某一class进行添加、删除操作。示例： html：<li class="li2 "> <a href="javascript:;" onclick="collectGoods({$data.goods_id})" id="collect_btn"> <i class="icon {if $dat
vue清除绑定的class_vue基础知识
weixin_39640687的博客
01-31 3215
点击上方 蓝字 关注我们vue生命周期beforeCreatcreatedbeforeMountmountedbeforeDestroydestroyedbeforeUpdateupdated模板语法v-htmlv-text计算属性 方法 侦听器varvm=newVue({el:"#app",data:{firstName:'zhao',...
jQuery点击添加删除class
东泰博客
01-07 1539
替换class这个功能对于点击事件是比较常用的。 举个例子，想小编那样的菜单按钮就是用到这个功能的，点击按钮后添加个class，然后再加css动态效果，可以做出很好看的特效效果 添加:addClass(“class”) 删除:removeClass(“class”) $(document).ready(function(){ $(".class").click(function(){ ...
Vue点击本条添加加class样式，移除其他条class样式
热门推荐
xiasohuai的博客
06-20 1万+
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Vue如何加class&lt;/title&gt; &lt;meta charset="utf-8"/&gt; &lt;style type="text/css"&gt; .classred{ color:red;
Vue.js实现点击后动态添加class及删除同级class
weixin_44524835的博客
08-19 2417
需要实现一个按钮点击变色的功能，具体方式是通过vue动态的给被点击的元素添加class名字，使其变色，其他的删除class。 这里用了mu-button按钮组件。 <mu-button round v-for="(type,index) in goodsType" color="#F4F4F4" @click="selectType(index)" :class="{'on':index==selectTypeIndex}">{{type}}</mu-button> expor.
vue 点击添加class，其他元素移除class（循环数组）
ma_hao99的博客
05-28 1861
<div class="admin-main-nav"> <ul id="mainNav"> <li v-for="(item, index) in items" :key="item.id" :class="{ active: current == index }" @click="selectNav(index)" > &l.
vue实现点击元素给该元素class（多选）
最新发布
06-01
你可以使用 Vue.js 的 v-bind:class 指令来实现点击元素给该元素 class 的效果，具体步骤如下： 1. 在 Vue 实例中定义一个数组和一个方法，用来存储用户选择的元素和更新元素的 class。 ``` data() { return { selectedElements: [] } }, methods: { toggleClass(element) { if (this.selectedElements.includes(element)) { this.selectedElements.splice(this.selectedElements.indexOf(element), 1); } else { this.selectedElements.push(element); } } } ``` 2. 在模板中使用 v-for 指令来渲染元素列表，使用 v-bind:class 指令来绑定元素的 class。 ``` <div v-for="element in elements" :key="element.id" :class="{ 'selected': selectedElements.includes(element) }" @click="toggleClass(element)"> {{ element.label }} </div> ``` 3. 在元素的 class 中使用一个对象来定义多个 class，当用户点击一个元素时，将该元素添加到 selectedElements 数组中，并使用 toggleClass 方法来更新元素的 class。当用户再次点击该元素时，将其从 selectedElements 数组中删除，并更新元素的 class。 ``` data() { return { elements: [ { id: 1, label: 'Element 1' }, { id: 2, label: 'Element 2' }, { id: 3, label: 'Element 3' }, ], selectedElements: [] } }, methods: { toggleClass(element) { if (this.selectedElements.includes(element)) { this.selectedElements.splice(this.selectedElements.indexOf(element), 1); } else { this.selectedElements.push(element); } } } ``` ``` <div v-for="element in elements" :key="element.id" :class="{ 'selected': selectedElements.includes(element) }" @click="toggleClass(element)"> {{ element.label }} </div> ``` 当用户点击一个元素时，该元素的 class 将会被更新为 selected，当用户取消选择该元素时，其 class 将会被移除。你可以在 Vue 实例中使用 selectedElements 数组来处理用户的选择。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值