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

最新推荐文章于 2023-03-29 12:17:37 发布

幽幽靖

最新推荐文章于 2023-03-29 12:17:37 发布

阅读量1.3k

点赞数

分类专栏： VUE

本文链接：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元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

幽幽靖

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

学习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

790

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

6321

需求是点击按钮切换部分显示内容，并显示不同的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

3524

Vue mounted created 方法函数对比区别 created：在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。 mounted：在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。 JQuery $ 预加载函数 $(function(){ alert('页面已加载'); }); Vue 替代 Jquery

vue 操作DOM，添加删除样式

深渊那支花的博客

07-04

2772

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

890

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

3617

<tr v-for="(item,inedx) in tableData.body" :key="item.id"> <td> <label @click="isCheck = index" :class="{'label':isCheck == index}"> <input ty

【转载】Vue -- 获取点击元素的兄弟元素

BiangBaing的博客

11-24

1345

转载自 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

8572

转载自：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

2200

VUE组件之间的传递数据是很重要，坑也很多，一，父组件向子组件传值1.创建子组件，在src / components /文件夹下新建一个Child.vue 2.Child.vue的中创建道具，然后创建一个名为message的属性child.png3.在App.vue中注册子组件，并在模板中加入子标签，标签中添加邮件属性并赋值App2.png4.保存修改的文件，查看浏览器browser.png5.我...

addClass、removeClass、toggleClass属性（方法）