首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

通过在v-for中单击切换单个li元素的类

在Vue.js中,可以通过在v-for指令中添加@click事件来实现单击切换单个li元素的类。具体步骤如下:

  1. 首先,在Vue实例中定义一个数组,用于存储li元素的数据。例如:
代码语言:txt
复制
data() {
  return {
    items: [
      { id: 1, name: 'item 1', active: false },
      { id: 2, name: 'item 2', active: false },
      { id: 3, name: 'item 3', active: false },
      // 其他li元素数据...
    ]
  }
}
  1. 在模板中使用v-for指令遍历items数组,并为每个li元素绑定一个点击事件。同时,使用动态绑定class属性来切换li元素的类。例如:
代码语言:txt
复制
<ul>
  <li v-for="item in items" :key="item.id" :class="{ active: item.active }" @click="toggleActive(item)">
    {{ item.name }}
  </li>
</ul>
  1. 在Vue实例中定义toggleActive方法,用于切换li元素的active属性。例如:
代码语言:txt
复制
methods: {
  toggleActive(item) {
    item.active = !item.active;
  }
}

通过以上步骤,当单击某个li元素时,会触发toggleActive方法,从而切换li元素的active属性。根据active属性的值,li元素的类会相应地切换为active类或非active类。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)

  • 产品介绍链接地址:https://cloud.tencent.com/product/cvm
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • vue课程大全

    标签引用模版 另一个定义模板方式是一个 元素,并为其带上 text/x-template 类型,然后通过一个 id 将模板引用过去。...,Vue 将会做以下处理:自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,恰当时机添加/删除 CSS 名。...(注意:此指浏览器逐帧动画机制,和 Vue nextTick 概念不同) 上例涉及到过渡css进入/离开过渡,会有 6 个 class 切换。v-enter:定义进入过渡开始状态。...元素被插入之前生效,元素被插入之后下一帧移除。v-enter-active:定义进入过渡生效时状态。整个进入过渡阶段应用,元素被插入之前生效,在过渡/动画完成之后移除。...我看黑马教程用是v-enter设定属性,原来原理在这里:对于这些在过渡中切换名来说,如果你使用一个没有名字 ,则 v- 是这些默认前缀。

    1.6K20

    vue基础(学习官方文档)

    v-if VS v-show v-if 是“真正”条件渲染,因为它会确保切换过程条件块内事件监听器和子组件适当地被销毁和重建。...列表渲染 用 v-for 把一个数组对应为一组元素 v-for 指令需要使用 item in items 形式特殊语法 v-for,我们拥有对父作用域属性完全访问权限。...{{ n }} 计算属性不适用情况下 (例如,嵌套 v-for 循环中) 你可以使用一个 method 方法 <li v-for...你应该通过 JavaScript 组件 data 选项声明初始值。...单个元素 每个组件必须只有一个根元素 通过事件向父级组件发送消息 调用内建 $emit 方法并传入事件名字,来向父级组件触发一个事件 使用事件抛出一个值 <button v-on

    5.4K30

    Vue 相关学习笔记(一)

    或者多个元素 2- 进行两个视图之间切换 <!...v-if是动态向DOM树内添加或者删除DOM元素 v-if切换有一个局部编译/卸载过程,切换过程合适地销毁和重建内部事件监听和子组件 循环结构 v-for 用于循环数组里面的值可以是对象,也可以是普通元素...4.1 、让默认第一项tab栏高亮 tab栏高亮 通过添加名active 来实现 (CSS active 样式已经提前写好) data 定义一个 默认 索引 currentIndex 为...0 给第一个li 添加 active 通过动态绑定class 来实现 第一个li 索引为 0 和 currentIndex 值刚好相等 currentIndex === index 如果相等...reverse() reverse() 将数组倒序,成功返回倒序后数组 替换数组 不会改变原始数组,但总是返回一个新数组 filter filter() 方法创建一个新数组,新数组元素通过检查指定数组符合条件所有元素

    7.5K20

    Vue模板语法

    可以通过config.keyCodes自定义按键修饰符别名   预先定义了keycode 116(即F5)别名为f5,因此文字输入框按下F5,会触发prompt...绑定对象时候 对象属性 即要渲染名 对象属性值对应是 data 数据 绑定数组时候数组里面存是data 数据 2. style样式处理 对象语法 <div v-bind...分支结构 v-if 使用场景 1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素 2- 进行两个视图之间切换        <!...v-if是动态向DOM树内添加或者删除DOM元素 控制元素是否渲染到页面 v-if切换有一个局部编译/卸载过程,切换过程合适地销毁和重建内部事件监听和子组件 3.循环结构 v-for遍历数组...:帮助Vue区分不同元素,从而提高性能 key来给每个节点做一个唯一标识 key作用主要是为了高效更新虚拟DOM <li :key='item.id' v-for='(item,index

    6.7K40

    vue-学习笔记(更新...)

    尽管可以命令式地创建扩展实例,不过多数情况下建议将组件构造器注册为一个自定义元素,然后声明式地用在模板。  ...v-bind:class 切换或增加名,就是绑定名,两种写法: v-bind:class=“名” :class=“名”//v-bind简写格式,只留一个冒号,去掉冒号前边v-bind v-bind...不过他和if不同之处是: v-show核心原理是通过切换元素cssdisplay来控制元素显示。当v-show为真值时,该元素display=block,反之为none。...但是不管页面显不显示,他始终html源码dom结构,总是都被渲染出来了。你观察源代码或者看控制台,他还是。...其核心是,切换元素display,也就是说,不管显不显示他都会被渲染到htmldom结构中去,而if不会。

    2.1K60

    2-本地应用:Vue指令

    --利用v-on指令与单击事件绑定,发生单击事件时调用clickFunc方法--> <input type="button" value="事件绑定1" v-on:click="clickFunc...实例<em>中</em>定义方法,只需要将其写入methods属性<em>中</em>即可,同时我们可以<em>在</em>方法<em>中</em>获取到Vue实例<em>中</em><em>的</em>相关数据,只需要利用this关键字即可 ...v-bind指令 v-bind指令用于设置<em>元素</em><em>的</em>属性(例如src,title,class),使用方法就是<em>在</em>v-bind指令后面跟上要设置<em>的</em>属性名称,<em>通过</em>等号为其赋值,也可以省略”v-bind”部分为”:...<em>v-for</em>指令可以接收普通数组以及对象数组等特殊数据结构进行遍历,同时<em>在</em>使用过程中有两个默认参数item和index,item本质就是遍历数组<em>的</em>对象,类似于for i in range结构<em>中</em><em>的</em>i,<em>通过</em>item...可以获取到数组对应<em>的</em><em>元素</em>对象,同样<em>的</em>,item是可以随意命名<em>的</em>,index即为该对象在数组<em>中</em><em>的</em>索引值 v-model指令 v-model指令用于设置和获取表单<em>元素</em><em>中</em><em>的</em>值(双向数据绑定),即将数据绑定到对应<em>元素</em>后

    1.2K10

    15 v-if 条件渲染与 v-for 列表渲染

    目录 v-if 条件渲染 组件缓存和复用 v-for 与大数据列表组件复用 源码 v-if 条件渲染 vue源码中有这样一个函数: function processIf (el) { var...从上面的 vue 源码也可以看出,vue处理单个节点属性,并没有考虑上下文之间语法关系。这决定了v-if不能独立存在,必须附属一个元素上。 如果v-if不方便添加在元素上怎么办?...所以,template是非可见元素vuetemplate仅是为了方便处理群组关系而存在。...:'username'">切换登陆型 运行效果: ? 明明是两个逻辑分支,为什么上一个分支里组件输入了123,保留到了下一个分支组件里?...v-for 与大数据列表组件复用 v-for指令用于渲染一个列表。被重复渲染元素要求有一个key。这个key一般取元素数据某个唯一字段,id或者其它字段。

    1.9K20
    领券