例如我有一个这样的组件，我希望在点击组件之后由蓝色变成橙色

先把原来的代码附上(简化掉了叉号）：

<div v-for="(item, index) in words" :key="index" class="scrollbar-demo-item">
     <span>{{ item }}</span>
</div>

修改后的代码(简化掉了叉号）：

<template>
<div v-for="(item, index) in words" @click="changeColor" :key="index" :class="[checked?'scrollbar-demo-item1':'scrollbar-demo-item']">
     <span>{{ item }}</span>
</div>
</template>

<script>
export default{
    data() {
        return {
        checked: false
        };
    },
    method(){
        changeColor(){
                this.checked = !this.checked; // 切换 checked 变量的值
            }
        },
    }
}
</script>

<style>
.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background:rgb(237,245,255);
  color:rgb(84,156,253);
}
.scrollbar-demo-item1 {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background:rgb(255, 218, 176);
  color:rgb(255, 153, 0);
}
</style>