vue中v-for循环选中点击的元素并对该元素添加样式

相信大家都会遇到这种情况：v-for循环时，我只需要点击到的元素做出相应反应，其他的元素不变；但是往往所有v-for循环出的元素都会变化。如下面的代码：我需要点击到的元素添加一个类样式，其他元素不变，但是这样会导致所有的元素都会变化
解决方法：使用index索引，当点击一个元素时，将该元素的index索引赋给类样式的启用变量，如果该变量和index相等时，则启用该类样式
 

html

<ul v-for="(name, index) in Name" v-bind:key="index">
  <li
     @click="onclik(index)"
     class="job-type-item-chocie"
     :class="active == index ? 'job-type-item-chocie2' : '' "
  >
     {{ name }}
  </li>
</ul>

js | ts

export default defineComponent({
  setup() {
    const Name = ref([
      "平面设计/UI设计",
      "前端开发工程师",
      "后端开发工程师",
      "业务经理/售前工程师",
      "行政管理",
    ]);

    const active = ref(0)

    const onclik = (index) => {
      console.log(index);
      active.value = index;
    };

    return { Name, onclik, active };
}

css

ul {
  margin: 0;
  padding: 0;
  width: 200px;
}
.job-type-item-chocie {
  list-style: none;
  height: 3rem;
  text-align: center;
  line-height: 3rem;
}
.job-type-item-chocie2{
  color: #fff;
  background-color: #ff4411;
}