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'
}
}
