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