vue实现开关灯

Vue 实现开关灯效果

核心思路

利用 Vue 的数据绑定和条件渲染特性，通过切换布尔值控制 CSS 类名或样式，实现灯光开关的视觉切换效果。

实现步骤

1. 基础模板结构

<div id="app">
  <button @click="toggleLight">开关灯</button>
  <div class="room" :class="{ 'light-on': isLightOn }"></div>
</div>

2. Vue 实例配置

new Vue({
  el: '#app',
  data: {
    isLightOn: false
  },
  methods: {
    toggleLight() {
      this.isLightOn = !this.isLightOn;
    }
  }
})

3. CSS 样式设计

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

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

进阶实现方案

动态图标切换

<button @click="toggleLight">
  {{ isLightOn ? '关灯' : '开灯' }}
  <i :class="isLightOn ? 'el-icon-light-on' : 'el-icon-light-off'"></i>
</button>

添加状态持久化

created() {
  this.isLightOn = localStorage.getItem('lightStatus') === 'true'
},
methods: {
  toggleLight() {
    this.isLightOn = !this.isLightOn
    localStorage.setItem('lightStatus', this.isLightOn)
  }
}

注意事项

• 过渡效果建议使用 CSS transition 而非 JavaScript 控制
• 复杂场景可结合 Vuex 管理状态
• 移动端注意添加适当的触摸反馈
• 无障碍访问需添加 aria-pressed 属性

扩展功能

watch: {
  isLightOn(newVal) {
    document.body.style.backgroundColor = newVal ? '#f5f5f5' : '#222'
  }
}