c7 切換燈泡明滅

by BDeer

HTML

<div id="app">
 <section class="light">
  <div :class="{lightHead1:a,lightHead2:b}"></div>
  <div class="lightBody"></div>
  <div class="lightFooter"></div>
 </section>
 <section>
  <button @click="changeLight">切換開關</button>
  </section>
</div>

CSS

.light {
 position: relative;
 height: 170px;
 width: 150px;
 margin-left: 60px;
}
.lightHead1 {
 z-index: 20;
 position: absolute;
 left: 25px;
 border-radius: 50px;
 width: 100px;
 height: 100px;
 background-color: rgba(100, 100, 100, 0.5);
}
.lightHead2 {
 z-index: 20;
 position: absolute;
 left: 25px;
 border-radius: 50px;
 width: 100px;
 height: 100px;
 background-color: rgb(230, 230, 68);
}
.lightBody {
 z-index: 10;
 position: absolute;
 padding: 25px;
 left: 30px;
 top: 70px;
 border-top: 60px solid rgba(100, 100, 100, 0.5);
 border-left: 20px solid transparent;
 border-right: 20px solid transparent;
}
.lightFooter {
 z-index: 30;
 position: absolute;
 left: 50px;
 top: 130px;
 width: 50px;
 height: 20px;
 background-color: rgb(58, 58, 58);
 border-radius: 0 0 15px 15px;
}

Vue

let vmBindOn = new Vue({
 el: '#app',
 data: {
  lightHead1: 'lightHead1',
  lightHead2: 'lightHead2',
  a: false,
  b: true
 },
 methods: {
  changeLight() {
   this.a = !this.a
   this.b = !this.b
  }
 }
})