当前位置：首页 > VUE

vue实现开关灯

2026-01-08 08:05:16VUE

Vue实现开关灯效果

使用Vue实现开关灯效果可以通过数据绑定和条件渲染完成。以下是具体实现方式：

创建Vue实例并定义数据

new Vue({
  el: '#app',
  data: {
    isLightOn: false
  }
})

HTML模板部分

<div id="app">
  <button @click="isLightOn = !isLightOn">
    {{ isLightOn ? '关灯' : '开灯' }}
  </button>

  <div class="room" :class="{ 'light-on': isLightOn }">
    <div class="light-bulb"></div>
  </div>
</div>

CSS样式部分

.room {
  width: 200px;
  height: 200px;
  background-color: #333;
  position: relative;
  transition: background-color 0.5s;
}

.light-bulb {
  width: 30px;
  height: 30px;
  background-color: #ccc;
  border-radius: 50%;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.light-on {
  background-color: #fff8e1;
}

.light-on .light-bulb {
  background-color: #ffeb3b;
  box-shadow: 0 0 20px #ffeb3b;
}

实现原理说明

使用Vue的数据绑定功能，通过isLightOn布尔值控制灯光状态
按钮点击事件切换isLightOn的值
通过条件类名:class动态添加/移除light-on类
CSS过渡效果使灯光变化更平滑

进阶实现方式

对于更复杂的效果，可以结合CSS动画：

@keyframes flicker {
  0% { opacity: 1; }
  50% { opacity: 0.8; }
  100% { opacity: 1; }
}

.light-on .light-bulb {
  animation: flicker 0.5s infinite;
}

组件化实现

对于大型应用，可将开关灯功能封装为组件：

Vue.component('light-switch', {
  template: `
    <div>
      <button @click="toggle">
        {{ isOn ? '关灯' : '开灯' }}
      </button>
      <div class="light" :class="{ 'on': isOn }"></div>
    </div>
  `,
  data() {
    return {
      isOn: false
    }
  },
  methods: {
    toggle() {
      this.isOn = !this.isOn
    }
  }
})

vue实现开关灯