vue项目实现渲染列表获取当前点击项(高亮)

一个简单的例子:

这是渲染列表的代码

在data里设置一个初始值0,

<div v-for="(item, index) in tochildren" :key="index" @click="currentIndex=index" :class="{style1:index==currentIndex}">{{item}}</div>

也是实现需求的核心  主要是绑定属性样式是否为true,通过click改变当前index值也就是将当前点击的index赋值给cureentIndex,此时被点击的那个会显示style1样式

对于页面上写死的列表怎么获取当前的子元素呢 同样的思路

<ul>

<li :class="{style1:index==1}" @click="index=1">这是第一行</li>

<li :class="{style1:index==2}" @click="index=2">这是第二行</li>

</ul>

这一次只不过是将index写死

这个思路可以用于解决高亮 获取当前点击对象,不知道是否对你有所帮助呢? 加油!

原文地址:https://www.cnblogs.com/bbldhf/p/11229123.html

时间: 2024-10-29 08:42:08

vue项目实现渲染列表获取当前点击项(高亮)的相关文章

vue中怎么实现获取当前点击对象this

应用场景 在评论列表中,有很多条评论(通过循环出来的评论列表),评论的文字有多跟少,默认展示2行超出显示点击查看更多,,要点击查看更多对当前的这条评论进行全部评论展示! 问题描述 要是在传统的点击事件中,我们可以获取当前点击事件的this来执行相应的操作,但是在vue中没有这个点击this事件! 解决问题 在vue中我们要通过组件的方式来实现对当前元素进去切换 父组件 <v-content :cont="item.content"></v-content> 子组

【笔记】js获取当前点击元素的索引

以前用jq 做过图片切换 滑动之类的特效现在想用js 试试是怎么一回事 jq图片切换的思路是用index()函数获取当前点击的按钮的索引然后根据索引值将对应索引的图片显示出来 于是查了一下js 是如何获取index的如下: js代码 var ul = document.getElementById("list"); var ul_child = ul.getElementsByTagName('li'); for (var i = 0; i < ul_child.length;

通过this获取当前点击选项相关数据

很多时候jquery只能或者应该回去一个集合.然后通过this获取触发时间的对象及相关属性 this.jq('#needsType').on("click", ".selection", function (e) { e.stopPropagation(); //获取父级元素,使得隐藏的ul在添加on方法后显示出来 var that = $(this).parent(); console.log(that); that.addClass('on'); that.fi

jq获取当前点击的li是ul中的第几个?

<script> var navulsize = $('.navul li').size();            var navulwidth = $('.navul li').width();            var allwidth = navulwidth*navulsize;            $('.navul').width(allwidth);            $('.navul li').click(function(){                va

easyui获取当前点击对象tabs的title

现在如果要关闭一个tab,只能点击该tab上面的x号.现增加双击tab使其关闭. 可使用jquery的bind函数绑定dblclick双击事件 tabs的关闭方法为close 要传一个title参数表示哪个选项卡将被关闭. 所以首先就要获取被点击对象的title. 查找AIP getSelected方法是获得选中的选项卡面板,这个不行, 没能找到能直接获取title的方法. 观察上面打开的tabs选项卡,肯定会有一个目前是被选中状态,而这个状态的class属性也肯定是和其他tabs不一样的,通过

easyui获取当前点击对象tabs的title和Index

观察上面打开的tabs选项卡,肯定会有一个目前是被选中状态,而这个状态的class属性也肯定是和其他tabs不一样的,有个class等于tabs-selected的 var title = $('.tabs-selected').text(); console.log(title);  --为0个采购合同 jquery里有一个方法是index([subject]) $("#ul li").index($("#selected")); 设定列表范围(#ul li列表)

iOS 获取当前点击的坐标

1 - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event 2 3 { 4 NSSet *allTouch = [event allTouches]; 5 UITouch *touch = [allTouch anyObject]; 6 CGPoint point = [touch locationInView:[touch view]]; 7 int x = point.x; 8 int y =

ios开发之-- tableview/collectionview获取当前点击的cell

方法如下: 一般collectionView 或者 tableview都有自带的点击函数,如下: 1, collectionView -(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{ //一般情况,cell不是自定义 UICollectionViewCell * cell = (UICollectionViewCell *)[col

vue项目axios请求接口,后端代理请求接口404,问题出现在哪?

在vue项目中,列表数据需要用到qq音乐接口中的数据,但是直接请求不行,有host及referer限制,需要采用后端代理的方式.借助axios及node的express,在dev-server.js中实现后,重启项目,结果接口404了.代码如下: 仔细检查后,代码没问题:于是在apiRouts中console.log()打印信息,运行没有打印信息,意味着根本没有运行这部分代码.于是想到会不会是webpack版本更新,配置发生了改变导致的.所以仔细看了配置后,发现webpack.dev.conf.