例如我有一个这样的组件，我希望在点击组件之后由蓝色变成橙色
先把原来的代码附上(简化掉了叉号）：
<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>
