class binding

by simati

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
  <div id="app">
  <div class="search">
    <input :class="{ longwidth : isActive }" v-show="showInput" type="text">
  </div>
   <button @click="changeClass">change class</button>
</div>

CSS

.longwidth {
  color: white;
  background: black;
}

JavaScript

var app = new Vue({
  el: '#app',
  data: () => ({
    isActive: false,
    showInput: true
  }),
  methods: {
    changeClass() {
      this.isActive = true
    }
  }
})