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)”）