Vue中v-for循环出的数据，点击哪个时，给哪个动态添加类名

点击哪个就给哪个加类名

<template>
  <div class="box">
    <!-- 方法一: -->
    <div
      v-for="(item,index) in items"
      class="ie"
      :class="isactive==index?'addclass':''"
      :key="index"
      @click="onclick(index)"
    >
      <span class="spanName">{{item.name}}</span>
    </div>
    
    <div>---------------------------------------------------------------------------------------------</div>
    
    <!-- 方法二: -->
    <div
      v-for="(item,index) in items"
      class="ie"
      :class="{addclass:isactive==index}"
      :key="index"
      @click="onclick(index)"
    >
      <span class="spanName">{{item.name}}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isactive: -1,
      items: [
        {
          name: "第一个",
          price: "1",
        },
        {
          name: "第二个",
          price: "2",
        },
        {
          name: "第三个",
          price: "3",
        },
      ],
     
    };
  },
  methods: {
    onclick(index) {
      this.isactive = index;
    },
  },
  mounted() {},
};
</script>

<style scoped>
.addclass {
  color: red;
}
.ie {
  display: flex;
}
.spanName {
  display: flex;
  display: block;
  width: 30px;
  height: 40px;
}
</style>