c6 點擊切換雙樣式

by BDeer

HTML

<div id="app">
 <p :class="{classActive: isActive}">元素內套用 data</p>
 <button @click="toggleClass">雙向切換</button>
</div>

CSS

.classActive {
 display: inline-block;
 color: #FFF;
 background-color: #a01;
 padding: 1rem;
}

Vue

var vmBind = new Vue({
 el: '#app',
 data: {
  isActive: false
 },
 methods: {
  toggleClass() {
   this.isActive = !this.isActive
  }
 }
})