vue v-for에서 나온 목록, 어떤 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 표시, 다른 곳 클릭 숨기기
vueul의 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 글씨체가 붉어지는 동작이 바로 편집자가 여러분에게 공유한 모든 내용입니다. 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.