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

Posted 2022-05-05 bbldhf

一个简单的例子：

这是渲染列表的代码

在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写死

 

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