当前位置：首页 > VUE

vue实现点亮灯光

2026-03-08 04:25:08VUE

Vue实现点亮灯光效果

要实现一个点亮灯光的效果，可以通过Vue的动态样式绑定和事件处理来完成。以下是几种常见的实现方法：

使用v-bind绑定class

通过Vue的v-bind:class动态切换CSS类来实现灯光点亮效果。

<template>
  <div 
    class="light" 
    :class="{ 'light-on': isLightOn }" 
    @click="toggleLight"
  ></div>
</template>

<script>
export default {
  data() {
    return {
      isLightOn: false
    }
  },
  methods: {
    toggleLight() {
      this.isLightOn = !this.isLightOn;
    }
  }
}
</script>

<style>
.light {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: gray;
  cursor: pointer;
}
.light-on {
  background-color: yellow;
  box-shadow: 0 0 20px yellow;
}
</style>

使用v-bind绑定style

直接通过内联样式动态改变灯光颜色。

<template>
  <div 
    class="light" 
    :style="{ backgroundColor: lightColor }" 
    @click="toggleLight"
  ></div>
</template>

<script>
export default {
  data() {
    return {
      isLightOn: false
    }
  },
  computed: {
    lightColor() {
      return this.isLightOn ? 'yellow' : 'gray';
    }
  },
  methods: {
    toggleLight() {
      this.isLightOn = !this.isLightOn;
    }
  }
}
</script>

实现动画效果

添加CSS过渡效果使灯光点亮更平滑。

<style>
.light {
  transition: all 0.3s ease;
}
.light-on {
  transform: scale(1.1);
}
</style>

多个灯光控制

通过v-for循环渲染多个灯光，并独立控制每个灯光的状态。

<template>
  <div v-for="(light, index) in lights" :key="index">
    <div 
      class="light" 
      :class="{ 'light-on': light.isOn }" 
      @click="toggleLight(index)"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lights: [
        { isOn: false },
        { isOn: false },
        { isOn: false }
      ]
    }
  },
  methods: {
    toggleLight(index) {
      this.lights[index].isOn = !this.lights[index].isOn;
    }
  }
}
</script>

使用第三方动画库

引入如animate.css等动画库增强视觉效果。

vue实现点亮灯光

<template>
  <div 
    class="light animate__animated" 
    :class="{
      'light-on': isLightOn,
      'animate__pulse': isLightOn
    }" 
    @click="toggleLight"
  ></div>
</template>

以上方法可以根据实际需求选择或组合使用，实现不同风格的灯光点亮效果。