vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作

这里使用的是给被点击的li添加类名的方式

<template> <div class='person1'> <div v-for='(item,index) in lists' @click='clickAdd(index)' :key='index' :class='{red:i === index}'> <div>{{item.name}}</div> </div> </div></template><script>export default { data () { return { isShow: false, i: null, lists: [ {id: 1, name: ’rose’}, {id: 2, name: ’mike’}, {id: 3, name: ’jerry’} ] } }, methods: { clickAdd (index) { console.log(index) this.i = index } }, watch: { }}</script><style> li{ list-style: none; } .red{ color: red; }</style>

如果想要获取lists里某条数据信息的话，直接将item传递过去即可（@click=“clickAdd(item)”）

补充知识：vue点击ul中的li显示，点击其他地方隐藏

vue点击ul中的li显示弹框，点击其他地方隐藏弹框

注意：ref='seatTipOperation'

<ul ref='seatTipOperation' v-if='seatTipOperationVisible'> <li @click='handleSeatTipAdd()'>添加</li> <li @click='handleSeatTipDelect()'>删除</li> <li @click='handleSeatTipLock()'>锁定</li> <li @click='handleSeatTipFillIn()'>插空</li> <li @click='handleSeatTipSocket()'>插座</li> <li @click='handleSeatTipSwop()'>对调</li></ul>

handleSeatList () { this.seatTipOperationVisible = true}

mounted () { // this的指向问题 let that = this document.addEventListener(’click’, function (e) { // 这里that代表组件，this代表document // 冒泡也不会隐藏 if(!that.$refs.seatTipOperation.contains(e.target)){ that.seatTipOperationVisible = false } })}

以上这篇vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持好吧啦网。