vue点击当前元素添加class 删除兄弟元素的class

2023-11-13

在vue中当我们要实现点击元素动态添加类名时,我们不能像JQ那样去用(xxx.addClass(‘class’).siblings().removeClass(‘class’))实现,那我们应该怎样去做呢

解决方案:
1.在data里面申明一个属性,默认值最好为数字类型,并且不得大于当前元素+所有兄弟元素的length,可以默认为0(第一个元素选中)

2.在当前元素中添加动态class: “:class”,使用v-bind进行绑定

3.给元素点击事件,传入当前元素的index,把元素当前的index赋值给data里面的申明的属性,这样就可以点击实现该效果

一.首先给想要添加class的元素,通过v-bind绑定一个class

<li :class="activeClass == index ? 'actived':''" 
	v-for="(item,index) in itemList" 
	:key="index" 
	@click="getItem(index)">
      {{itme.name}}
</li>

二.在data中声明一个变量activeClass

data() {
    return {
      activeClass: -1, 	// 0为默认选择第一个,-1为不选择
    };
}

三.在点击事件中

getItme(index) {
    this.activeClass = index;  // 把当前点击元素的index,赋值给activeClass
}

四.在style里面写想要的样式就可以了

.actived {
  background: #eee; 
  color: #1e82d2;
  font-weight: bolder;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue点击当前元素添加class 删除兄弟元素的class 的相关文章

  • Linux文件目录类(常用指令)

    文件目录类 cd指令 基本语法 cd 参数 功能描述 切换到指定目录 cd 或者cd 回到自己的家目录 cd 回到当前目录的上一目录 绝对路径和相对路径 绝对路径 目标文件在硬盘上的真实路径 最精确路径 从根目录开始的 相对路径 相对于当前

随机推荐

  • 将程序打成jar包后运行mapReduce时出现File does not exit: hdfs://localhost....jar

    出现的问题 解决方法 直接向报错路径添加报错提示的文件
  • Installation failed with message Invalid File:

    最近在studio 在安装apk的时候遇到了这么个问题 他说我之前已经有安装版本了 但是这个apk却是我第一次安装 怎么回事 之前遇到过一次 自己不知道怎么解决了 当时忘记记录下来现在记录下来 给自己和后面遇到的朋友 提供一个快速的解决办法
  • 圣路易斯大学计算机科学,圣路易斯华盛顿大学计算机科学专业

    圣路易斯华盛顿大学计算机科学与工程系申请要求需要托福 接受雅思 需要GRE GPA 3 0 学费 47 300 年 春季 秋季入学 截止日 1月15日 PhD 3月1日 MS M Eng 圣路易斯华盛顿大学计算机科学与工程系课程 网络物理系
  • 说说你对Vue生命周期的理解?

    一 生命周期是什么 生命周期 Life Cycle 的概念应用很广泛 特别是在政治 经济 环境 技术 社会等诸多领域经常出现 其基本涵义可以通俗地理解为 从摇篮到坟墓 Cradle to Grave 的整个过程 在Vue中实例从创建到销毁的
  • OpenCV InputArray和OutputArray

    InputArray这个接口类可以是Mat Mat
  • Attention注意力机制--原理与应用

    Attention注意力机制 原理与应用 注意力机制即Attention mechanism在序列学习任务上具有巨大的提升作用 在编解码器框架内 通过在编码段加入A模型 对源数据序列进行数据加权变换 或者在解码端引入A模型 对目标数据进行加
  • 那些会阻碍程序员成长的细节[3]

    前两篇文间几乎是想到那里就写到那里 没有分门别类的加以阐述 本篇延续以上两篇文章的思路 在之前的基础再追加 没有看过前两篇文章的同学可通过这两个链接回顾一下 那些会阻碍程序员成长的细节 一 那些会阻碍程序员成长的细节 二 不能主动推动事物前
  • Halcon标定板标定

    halcon标定有自己的标定助手可以演示 不过拿到VS里面却不是很适用 尤其是关于畸变矫正和透视矫正算子的解释也没有 下面两个算子set origin pose gen image to world plane map关键参数怎么计算也没有
  • 【MyBatis-Plus】之批量插入

    一 应用情景介绍 在实际的项目开发过程中 常常遇到批量保存数据的场景 当数据量比较少 比如只有几条数据的情况下 我们可以使用 for 循环来 insert 数据 但如果数据量比较多的情况下就不行 特别是并发的情况下 因为这样会增加数据库的负
  • 一个学习编程的网站

    推荐一个学习编程的网站 https www runoob com
  • 请假流程

    作者 nogocn 在某一公司中 部门员工要休假的话需要部门主管的批准 如果休假天数大于10天的话 在部门主管的同意后 还必须上级主管批准 如果是部门主管要休假只要上级主管批准即可 在休假被批准之前 申请人可以撤销休假申请 每个员工还有多少
  • STM32的功耗模式

    按功耗由高到低排列 STM32 具有运行 睡眠 停止和待机四种工作模式 低功耗各模式下芯片工作情况 睡眠模式 仅关闭了内核时钟 内核停止运行 但其片上外设 CM4 核心的外设全都还照常 运行 有两种方式进入睡眠模式 它的进入方式决定了从睡眠
  • Java实现数据脱敏的方法

    在Java中 可以使用各种技术来实现数据脱敏 下面将介绍几种常见的Java实现数据脱敏的方法 字符串截取 字符串截取是一种简单的数据脱敏方法 它将敏感数据的一部分字符替换成 号或其他字符 例如 将身份证号码的前6位和后4位替换成 号 这样可
  • 开发一个文生图的功能

    文章目录 效果 开发环境 原理 核心代码 代码仓库 问题 效果 开发环境 Python 3 10 PyCharm 原理 借助开源项目stable diffusion 通过该项目封装python库diffusers 可以轻易的实现文生图的功能
  • css 强制不换行

    css中强制不换行 文本不会换行 文本会在在同一行上继续 直到遇到 br 标签为止 white space nowrap
  • LeetCode-剑指 Offer II 114. 外星文字典,BFS 搜索算法及图的表示

    剑指 Offer II 114 外星文字典 现有一种使用英语字母的外星文语言 这门语言的字母顺序与英语顺序不同 给定一个字符串列表 words 作为这门语言的词典 words 中的字符串已经 按这门新语言的字母顺序进行了排序 请你根据该词典
  • P25透明屏:探究在商业广告领域的应用表现

    P25透明屏是一种新型的显示屏技术 具有高透明度和高分辨率的特点 它可以将图像或视频直接投影到透明的表面上 使得观众可以透过屏幕看到背后的景物 同时也能够看到屏幕上的内容 P25透明屏广泛应用于商业展示 户外广告 产品展示等领域 P25透明
  • 写代码的心得

    一 初级阶段 管他三七二十一 需求直接开干 程序能跑通能干活就行 二 中级阶段 拿到需求心里过一遍 80 的架构和接口已经梳理定义完毕 尚有部分细节的没想明白怎么实现 边开发边想 边写边重构 等开发完 架构也定义清晰 三 高级阶段 拿到需求
  • 编写出一个通用的人员类(Person),该类具有姓名(Name)、年龄(Age)、性别(Sex)等域。然后对Person 类的继承得到一个学生类(Student),该类能够存放学生的5门课的成绩,并能

    编写出一个通用的人员类 Person 该类具有姓名 Name 年龄 Age 性别 Sex 等域 然后对Person 类的继承得到一个学生类 Student 该类能够存放学生的5门课的成绩 并能求出平均成绩 最后在Main函数中对studen
  • vue点击当前元素添加class 删除兄弟元素的class

    在vue中当我们要实现点击元素动态添加类名时 我们不能像JQ那样去用 xxx addClass class siblings removeClass class 实现 那我们应该怎样去做呢 解决方案 1 在data里面申明一个属性 默认值最