写一段vue里for循环中点击改变class名的代码，数据不可自定义

如果数据不可自定义，你可以使用一个临时的数组来存储每个选项的类名。在点击某个选项时，通过改变对应索引的类名来改变样式。下面是一个示例代码：

<template>
  <div>
    <ul>
      <li v-for="(option, index) in options" :key="index" :class="classNames[index]" @click="toggleClass(index)">
        {{ option }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: ['Option 1', 'Option 2', 'Option 3'],
      classNames: [], // 存储每个选项的类名
    };
  },
  methods: {
    toggleClass(index) {
      // 点击选项时切换类名
      this.classNames[index] = this.classNames[index] === 'active' ? '' : 'active';
    },
  },
};
</script>

<style>
.active {
  background-color: blue;
  color: white;
}
</style>

在上面的代码中，`options` 数组包含了选项的文本内容，`classNames` 数组用于存储每个选项对应的类名。初始时，`classNames` 数组为空，没有任何类名。当点击某个选项时，`toggleClass` 方法会切换该选项在 `classNames` 数组中的类名，如果当前类名是 `active`，则移除该类名；如果当前类名为空，则添加 `active` 类名。通过使用 `:class` 指令将对应的类名绑定到每个选项上，从而改变样式。在这个示例中，被选中的选项会有蓝色背景和白色文字颜色。