VUE渲染出的列表（每一列平级关系），点击的时候需要单独给li添加一个（：class）

最新推荐文章于 2024-05-09 18:47:11 发布
最新推荐文章于 2024-05-09 18:47:11 发布
阅读量768 收藏
点赞数
分类专栏： VUE框架 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Alesdwoniu/article/details/100770124
版权
本文通过一个实例展示了在Vue中如何实现点击列表项时，单独为当前选中的li元素添加class。代码中使用v-for遍历数据，结合v-on:click事件处理和v-bind:class动态绑定class，实现背景色变化的效果。
摘要由CSDN通过智能技术生成

原文转载地址：https://www.cnblogs.com/wenb/p/7611477.html

代码实例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
</head>
<style>
.class1{
  background: #444;
  color: #eee;
}
</style>
<body>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

<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>  
  
<script>  
new Vue({  
el: '#app',  
data: {  
datas: {  

最低0.47元/天 解锁文章
vue01-点击某一个li，该项变红，再点击变黑
White
12-07 1076
昨天写vue的一个小作业，发现灵性的操作。 作业：使用v-for和v-bind指令，循环展示数组数据，展示到列表标签中。默认列表第一项为红色，之后，点击哪个哪个变红，再点击变黑。 提示：使用index，数组的下标 开始的思路： 1 显示数组数据到列表中。不管颜色 2 显示第一项为红色 3 点击某一项，某一项变红或变黑 实现代码 <!DOCTYPE html> <html lang...
Vue实现对点击的列表＜li＞添加class样例
L00918的博客
05-27 928
实现思路： 设置一个变量 active，然后写成:class="{active:index === active}"，然后click的时候，传入index,把active变量的值赋值为index；这样this.active=index,index==‘index’ 返回true，所以class样例生效 <ul> <li v-for="(item,index) in params" @click="meClick(index)" :class="{active:inde
vue render中使用 class
风一样的少年
04-13 5141
故事开始：初代代码如下： // template { title: "操作", align: "center", render: (h:any, params:any) => { return h('div',[ h( 'span',{ class:{
vue 渲染出来的列表点击的时候需要单独给li添加一个class
dianfu4327的博客
09-29 307
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例</title> </head> <style> .class1{ background: #444; color: #eee;...
自学vuejs的练习，点击li让其绑定一个class
weixin_44474200的博客
05-10 158
<head> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <style> .active{ color:red } </style> <div id="app"> <ul> <li v-for="(m,index) i.
vue中 平级组件 传递事件
qq_41629498的博客
03-19 863
我们大多都知道父子组件之间传递事件，通常用到 子组件通过this.$emit()派发事件，父组件利用v-on对事件进行监听，实现参数的传递 那么两平等组件间的事件的传递要怎么实现呢 具体如下 这里就需要new一个调度器来完成 Vue.prototype.bus = new Vue() //这个调度器我把他定名为bus，并且把它挂载在vue原型上。 在main.js文件下 下面这个是需...
vue2.0中click点击当前li实现动态切换class
08-30
在 Vue 2.0 中，如何点击当前 li 实现动态切换 class 是一个非常重要的知识点。本文将详细介绍如何使用 Vue 2.0 实现点击当前 li 实现动态切换 class。 首先，让我们了解一下 Vue 2.0 中的动态切换 class。动态切换...
在vue中给列表中的奇数行添加class的实现方法
10-18
在Vue.js中，给列表中的奇数行添加class是一个经常遇到的需求，尤其是在处理展示数据列表的时候。Vue.js作为一个渐进式JavaScript框架，提供了简单而强大的方式来动态地渲染DOM，其中就包括了条件类绑定功能。这个...
VUE2学习（class和style绑定、列表的渲染、表单收集）-day03
javaxueba的博客
09-20 226
最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值 如果不存在对数据的逆序添加、逆序删除等破坏顺序的操作，仅用于渲染列表，使用index作为key是没有问题的。v-else 适用于：切换频率较低的场景 特点：不展示的DOM元素直接被删除 注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被打断。若：，则v-model收集的是value值，用户输入的内容就是value值。
Vue学习笔记（条件渲染、列表渲染、Class与Style绑定）
jx2931455的博客
06-05 663
条件渲染、列表渲染、Class与Style绑定. 条件渲染：v-if v-else v-else-if，v-show 列表渲染：v-for <div v-for="item in list"> style和class 的绑定：style可写成对象形式，然后通过属性绑定v-bind进行绑定；class绑定写成对象形式，键名是真是的class名称，值为布尔值或表达式，或者可以使用数组...
vue动态添加class/vue点击li列表动态添加class
撑起自己半边天
10-27 2291
vue动态添加class/vue点击li列表动态添加class 此案例适合一个元素里面包含多个类，‘menu-item active’:item.id==current，前面单引号的是对应要添加的类名，后面是添加条件。使用场景：列表点击时切换背景色、图片、图标等。 <li v-for="item in nav" :key="item.id" :class="{ 'menu-item active':item.id==current,'menu-item':item.id!=current}" @cl
Vue2.0 实现click点击当前li，动态切换class
_夜渐凉
09-04 6405
1，文件内容 为item添加不存在的属性，需要使用vue提供的Vue.set( object, key, value )方法。   看详解：https://cn.vuejs.org/v2/api/#Vue-set 这个案例需要注意的一点是：vue 中$index $key 已经移除了 之前可以这样： &lt;ul id="example"&gt; &lt;li v-for="i...
vue 动态绑定 class 属性
a1997bcd的博客
06-29 308
https://blog.csdn.net/weixin_43851769/article/details/90079823 一.首先给想要添加class的元素，通过v-bind绑定一个class 二.在data中声明一个变量activeClass 三.在点击事件中 四.在style里面写想要的样式就可以了 <li :class="activeClass == index ? 'acti...
vue 鼠标指向、单击 li元素时需要动态添加类
weixin_35749440的博客
01-03 751
你可以使用 Vue.js 的 v-bind:class 指令来动态绑定元素的类。具体方法如下： 首先，在你的 Vue 实例的 data 中定义一个名为 "selected" 的变量，这个变量用来记录当前被选中的 li 元素的索引。 然后，在你的 li 元素上使用 v-bind:class 指令，并将一个对象传递给它。这个对象的键名是你要绑定的类名，键值是一个布尔值，表示当前 li 元素是否应该...
Vue点击切换Class变化，实现Active当前样式
热门推荐
D船长的博客
08-12 3万+
刚入门Vue没多久，在制作过程中遇到很多简单实用的小技巧。 没有太多的墨水，直接上代码：   一、先在data里增加一个变量，用来储存当前点击的元素 data() { return { activeClass: -1, // 0为默认选择第一个，-1为不选择 }; },  二、在Template里面的代码，切记在@click方法里面要传index， ...
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
10-15
在Vue.js中，`v-for`指令用于循环渲染列表数据，而实现点击列表项（li）使其字体变红，可以通过动态绑定CSS类来实现。在这个示例中，我们看到一个包含多个li元素的列表，每个li元素对应于`lists`数组中的一个对象。...
最新vue-列表的渲染_vueel-casca动态渲染把一级列表单独提出来，web前端开发课程安排
最新发布
2401_84433769的博客
05-09 332
中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。技术要深入到什么程度？做久了技术总要转型管理？我能做什么，我想做什么？一技之长，就是深耕你的专业技能，你的专业技术。（重点）独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）拥有事业，选择一份使命，带领团队实现它。（创业）一技之长分五个层次栈内技术 - 是指你的前端专业领域技术栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识。
vue给循环出的li添加class
Morphinee的博客
03-05 791
<ul> <li v-for="(item,i) in bands" :key="i" :class="{red:i === active}" @click="changeClass(item,i)">{{item}}</li> </ul> class动态绑定’red‘,i为数组的index,当i === active时，添加red...
Vue-点击 li 动态添加class --＞[练]
Messchao的博客
07-20 520
初级vue知识练习,重点class与style
vue2.0 实现click点击当前li，动态切换class
weixin_30510153的博客
01-19 884
1，文件内容 ----//为item添加不存在的属性，需要使用vue提供的Vue.set( object, key, value )方法。 看详解：https://cn.vuejs.org/v2/api/#Vue-set <template>　　<div> 　　　　<ul> 　　　　　　<li v-for="(item,$index) in ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值