当前位置：首页 > VUE

vue实现div 点击变色

2026-01-21 01:38:06VUE

实现思路

在Vue中实现点击div变色的功能，可以通过数据绑定和事件监听来完成。主要利用Vue的响应式特性，动态修改div的样式或类名。

基础实现方法

数据驱动样式 通过绑定style或class，结合点击事件修改数据实现变色效果。

<template>
  <div 
    :style="{ backgroundColor: currentColor }"
    @click="changeColor"
    style="width: 200px; height: 200px; cursor: pointer"
  ></div>
</template>

<script>
export default {
  data() {
    return {
      currentColor: '#ffffff',
      colors: ['#ff0000', '#00ff00', '#0000ff']
    }
  },
  methods: {
    changeColor() {
      const randomIndex = Math.floor(Math.random() * this.colors.length)
      this.currentColor = this.colors[randomIndex]
    }
  }
}
</script>

类名切换实现

动态类名绑定 通过切换不同的CSS类实现颜色变化，更适合预定义多种样式的情况。

<template>
  <div 
    :class="colorClass"
    @click="toggleColor"
    class="color-box"
  ></div>
</template>

<script>
export default {
  data() {
    return {
      isRed: true
    }
  },
  computed: {
    colorClass() {
      return this.isRed ? 'red' : 'blue'
    }
  },
  methods: {
    toggleColor() {
      this.isRed = !this.isRed
    }
  }
}
</script>

<style>
.color-box {
  width: 200px;
  height: 200px;
  cursor: pointer;
}
.red {
  background-color: #ff0000;
}
.blue {
  background-color: #0000ff;
}
</style>

进阶实现方式

多元素切换 当需要控制多个div的选中状态时，可以使用数组和索引管理。

vue实现div 点击变色

<template>
  <div v-for="(item, index) in items" :key="index"
    :style="{ backgroundColor: item.active ? '#ff0000' : '#ffffff' }"
    @click="toggleActive(index)"
    class="item-box"
  ></div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { active: false },
        { active: false },
        { active: false }
      ]
    }
  },
  methods: {
    toggleActive(index) {
      this.items[index].active = !this.items[index].active
    }
  }
}
</script>