vue中实现类似于jQuery中的ele.addClass('class').siblings().removeClass('class')效果

最新推荐文章于 2023-03-29 12:17:37 发布
最新推荐文章于 2023-03-29 12:17:37 发布
阅读量1.3k 收藏
点赞数
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ws19900201/article/details/98733183
版权
在Vue项目中，模拟jQuery的addClass方法给指定元素添加类名，并使用siblings方法移除兄弟元素的类名。通过绑定点击事件和Vue的指令实现这一功能。
摘要由CSDN通过智能技术生成

代码：

html

<li v-for="(item, index) in tabList"
	:key="index"
	:class="[item.isChoose, item.tclass, {on:index == current}]"
	@click
最低0.47元/天 解锁文章
幽幽靖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
学习vue.js中class与style绑定
11-26
在Vue.js中，`class`和`style`的绑定是数据绑定的一种常见需求，它允许我们根据组件的状态动态地改变元素的样式。Vue.js提供了`v-bind`指令来实现这一功能，大大增强了模板的灵活性。 首先，让我们看下`v-bind:...
vue中类似于jq中的ele.addClass('class').siblings().removeClass('class')效果
weixin_30795127的博客
04-09 788
vue中要实现当前元素添加类同级兄弟元素移除类的效果，可使用v-bind:class； v-bind:class支持变量，当变量发生变化的时候，class将发生变化； 实现方法举例： <template> 　　<div> 　　　　<ul> 　　　　　　<li v-for="(item,index) in liList" :key="index"...
vue点击当前元素添加class 删除兄弟元素的class
尘生杜若
05-10 1万+
在vue中当我们要实现点击元素动态添加类名时，我们不能像JQ那样去用（xxx.addClass(‘class’).siblings().removeClass(‘class’)）实现，那我们应该怎样去做呢 解决方案： 1.在data里面申明一个属性，默认值最好为数字类型，并且不得大于当前元素+所有兄弟元素的length，可以默认为0（第一个元素选中） 2.在当前元素中添加动态class： “:cl...
vue 点击后动态绑定、删除class
qq_42504266的博客
11-22 6292
需求是点击按钮切换部分显示内容，并显示不同的class样式 之前遇到的动态添加class及删除同级class的需求比较多，在这里记录一下此类情况~ 点击切换内容，改变删除原有class,新增class 切换按钮 <el-button class="title_btn" type="primary" icon="el-icon-set-up" @click="changaView"> 切换显示模式 </el-button> 动态绑定class .
Vue 使用 JQuery方法 完美替代 JQuery
Bnana博客
03-11 3513
Vue mounted created 方法函数对比区别 created：在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。 mounted：在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。 JQuery $ 预加载函数 $(function(){ alert('页面已加载'); }); Vue 替代 Jquery
vue 操作DOM，添加删除样式
深渊那支花的博客
07-04 2748
vue 操作DOM，添加删除样式
vue-点击添加class 其他标签删除class
冥界摄政王
01-03 1万+
body> div id="app"> p v-for="(item,$index) in arr" @click="toggle($index)" :class="{active:$index==active}">{{item}}p> div> script> var app=new Vue({
vue.js实现的绑定class操作示例
10-18
首先，我们先了解Vue.js框架中如何通过v-bind指令或者其简写形式(:)来实现动态class绑定。v-bind是Vue.js提供的一个指令，用于将数据绑定到HTML元素或组件上。当与class属性一起使用时，v-bind允许我们根据组件的...
vue.js绑定class和style样式（6）
12-29
因此，在 v-bind 用于 class 和 style 时，Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。 通过 v-bind:class 或者 :class 来为style或者class来绑定 绑定class <div class=test> ...
vue.js实现点击后动态添加class及删除同级class的实现代码
10-18
在Vue.js框架中，动态添加和删除class是常见的需求，尤其在构建交互式界面时。通过使用Vue.js的响应式数据绑定和指令系统，开发者可以轻松地实现这一功能。具体到本例中，主要知识点包括： 1. 使用Vue.js的v-for...
vue--点击当前增加class,其他删除class的方法
10-18
今天小编就为大家分享一篇vue--点击当前增加class,其他删除class的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue删除
PanHanJia的博客
09-20 883
1、完成人员列表的删除功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7-dist/b...
vue实现单选框(即JQ的addClass().siblings().removeClass())
Abez_c的博客
10-19 3614
&lt;tr v-for="(item,inedx) in tableData.body" :key="item.id"&gt; &lt;td&gt; &lt;label @click="isCheck = index" :class="{'label':isCheck == index}"&gt; &lt;input ty
【转载】Vue -- 获取点击元素的兄弟元素
BiangBaing的博客
11-24 1339
转载自 https://blog.csdn.net/Lhy_JL/article/details/109130561 一、首先 //首先是获取当前点击事件 //view绑定并传递 $event <span v-show="depart" v-on:click="searchDepart($event)">部门</span> 二、然后，script e.target; //是你当前点击的元素 e.currentTarget; //是你绑定事件的元素 .
vue--点击当前增加class，其他删除class
John的专栏
04-10 8571
转载自：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组件之间的通信
前端技术的学习整理
05-09 2196
VUE组件之间的传递数据是很重要，坑也很多，一，父组件向子组件传值1.创建子组件，在src / components /文件夹下新建一个Child.vue 2.Child.vue的中创建道具，然后创建一个名为message的属性child.png3.在App.vue中注册子组件，并在模板中加入子标签，标签中添加邮件属性并赋值App2.png4.保存修改的文件，查看浏览器browser.png5.我...
addClass、removeClass、toggleClass属性（方法）
热门推荐
weixin_44540178的博客
04-27 2万+
大家来想一想jQuery的addClass、removeClass、toggleClass操作HTMLDOM的属性（方法） 开发工具与关键技术：Visual Studio jQuey 作者：Li Mingrun 撰写时间：2019年4月26日 小时可以不懂事，大时需懂事。小时不懂事有父母，大时不懂事您还有谁… 学习完新的课程有必要回头复习一下以前的课程知识基础，巩固个人的程序...
Class与Style几种绑定用法
callmeCassie的博客
04-03 2144
在我们的项目开发中给元素添加/删除 class 是非常常见的行为之一， 例如我们的网站导航都会给选中项添加一个 active 类用来区别选与未选中的样式，除了导航之外其他很多地方也都会用到这种方式处理选中与未选中。 除了设置 class 我们在项目中也经常设置元素的内联样式 style，在 jquery 时代我们大多数都是利用 addClass 与 removeClass 结合使用来处理 cla...
简单记录—vue 用js方法实现侧边导航栏联动选择
最新发布
qq_44782585的博客
03-29 1486
因为滚动要跟着一起变，所以要在 watch 里面实时监听scroll的变化，发生变化时，判断当前距离顶部最近的是第几章，得到index把侧边目录栏选中样式改为对应的即可实现。页面初始化的时候，给内容滚动的元素加一个侦听事件，定义一个变量 scroll 用来保存当前滚动的数值。页面结构部分，根据数据循环写一个ul > li，生成侧边目录。解决第一个需求，点击任意一条目录页面滚动到对应内容。1、选择任意一条页面滚动到指定目录位置。解决第二个需求，页面滚动，目录跟着滚动。2、页面内容滚动侧边栏跟随一起滚动。
Vue.js中setTimeout导致过渡效果不稳定的解决方法
在Vue.js应用中，开发者常常使用setTimeout来控制某些操作的延迟执行，例如在弹窗效果中实现平滑的过渡动画。在这个特定的场景中，开发者创建了一个弹窗组件，它有两个CSS类：beforeActive和active，用于控制弹窗的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值