vue 在脚手架内 点击添加样式，点击添加背景色

vue的点击改变样式   直接看代码    有我没有写清楚的地方欢迎留言    我偶们一起讨论！！！ 

<template>
  <div>
    <div
      v-for="(item, index) in nameoptions"
      :class="{ active: index == isActive }"
      @click="checkItem(index)"
      :key="item.name"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      isActive: 0,
      nameoptions: [
        {
          name: "1",
        },
        {
          name: "2",
        },
        {
          name: "3",
        },
        {
          name: "4",
        },
      ],
    };
  },
  methods: {
    checkItem(index) {
      // console.log(index);
      this.isActive = index;
    },
  },
};
</script>

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