vue 对于不同v-for循环渲染的对象数组使用同一种的背景颜色进行点击渲染

本文链接：https://blog.youkuaiyun.com/qq_39178473/article/details/106891865

本文介绍如何在Vue.js中为不同v-for渲染的数组元素动态切换背景颜色。通过使用三元表达式和绑定:class属性，实现点击元素时改变其背景色。此方法适用于多个数组的元素，并确保每次点击只激活一个元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.需求
针对不同v-for渲染出来的不同数组，鼠标点击时想通过同一个背景颜色去渲染

2.解决方法：
1）用:class=""绑定
2）写一个样式然后在:class用三元表达式判断当前是哪个对象

3）例子：

主体代码

<template>
  <div class="hello">
    <div v-for="(item, index) in data1" :key="index" :class="isActived === item ? 'blue-bg': ''" @click="bgChange(item)">
      {{item.value}}
    </div>
    <div v-for="(item, index) in data2" :key="'data2'+index" :class="isActived === item ? 'blue-bg': ''" @click="bgChange(item)">
      {{item.value}}
    </div>
    <div v-for="(item, index) in data3" :key="'data3'+index" :class="isActived === item ? 'blue-bg': ''" @click="bgChange(item)">
      {{item.value}}
    </div>
  </div>
</template>

js控制背景颜色切换
注意函数参数要传入整个对象item，这里是跟同一数组内的渲染的不同之处，同一数组内可以通过传入数组下标index去控制颜色变化，但是针对不同数组就需要传入对象item

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      isActived: '',
      data1: [
        {value: '元素1'},
        {value: '元素2'},
        {value: '元素3'}
      ],
      data2: [
        {value: '元素4'},
        {value: '元素5'},
        {value: '元素6'}
      ],
      data3: [
        {value: '元素7'},
        {value: '元素8'},
        {value: '元素9'}
      ]
    }
  },
  methods: {
    bgChange (item) {
      console.log(item)
      this.isActived = item
    }
  }
}
</script>

定一个背景颜色

<style scoped>
.blue-bg{
  background-color: aquamarine;
}
</style>