当前位置：首页 > VUE

vue实现触发变色

2026-02-19 07:08:36VUE

实现元素点击或悬停触发变色效果

方法一：使用v-bind和v-on实现点击变色

<template>
  <div 
    :style="{ backgroundColor: currentColor }"
    @click="changeColor"
  >
    点击我变色
  </div>
</template>

<script>
export default {
  data() {
    return {
      colors: ['#FF5733', '#33FF57', '#3357FF'],
      currentColor: '#FF5733'
    }
  },
  methods: {
    changeColor() {
      const nextColor = this.colors.find(color => color !== this.currentColor)
      this.currentColor = nextColor || this.colors[0]
    }
  }
}
</script>

方法二：使用class绑定实现悬停变色

<template>
  <div 
    class="color-box"
    :class="{ 'hover-effect': isHovered }"
    @mouseover="isHovered = true"
    @mouseleave="isHovered = false"
  >
    悬停我变色
  </div>
</template>

<script>
export default {
  data() {
    return {
      isHovered: false
    }
  }
}
</script>

<style>
.color-box {
  background-color: #FF5733;
  transition: background-color 0.3s;
}
.hover-effect {
  background-color: #33FF57;
}
</style>

方法三：使用CSS变量和计算属性

<template>
  <div class="dynamic-box" :style="boxStyle">
    动态变色元素
  </div>
</template>

<script>
export default {
  computed: {
    boxStyle() {
      return {
        '--box-color': this.isActive ? '#FFC300' : '#900C3F'
      }
    }
  },
  data() {
    return {
      isActive: false
    }
  },
  mounted() {
    setInterval(() => {
      this.isActive = !this.isActive
    }, 1000)
  }
}
</script>

<style>
.dynamic-box {
  background-color: var(--box-color);
  transition: background-color 0.5s;
}
</style>

方法四：使用第三方动画库（如Animate.css）

<template>
  <div 
    class="animated"
    :class="animationClass"
    @click="toggleAnimation"
  >
    点击我有动画变色效果
  </div>
</template>

<script>
export default {
  data() {
    return {
      isAnimated: false
    }
  },
  computed: {
    animationClass() {
      return this.isAnimated ? 'pulse bg-primary' : 'bg-secondary'
    }
  },
  methods: {
    toggleAnimation() {
      this.isAnimated = !this.isAnimated
    }
  }
}
</script>

注意事项