Vue.js toggle css classes

  • bind single class

 

  • bind object to manage multi css classes

<script src="https://unpkg.com/vue"></script>
<div id="app">

  <div class="demo" @click="attachRed = !attachRed" :class="divClasses"> </div>

  <div class="demo"></div>

  <dv class="demo"></dv>

</div>

 

new Vue({

el: '#app',

data: { attachRed: false, },

computed: {

  divClasses: function() {

    return { red: this.attachRed, blue: !this.attachRed };

  }

}

});

 or other  way 

  • change class dynamicaly by v-model

 demo3 が2つのクラスを持てることに注意

  • dynamicaly styling with no css class