1. Home
  2. Vue
  3. Toggle class

Example of toggling CSS class using v-bind, v-on:click and inline conditional statement.

#vue#class
<div id="app">
    <button v-bind:class="{ 'toggled' : is_active }" v-on:click="toggle_class()">Toggle</button>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            is_active: false
        },
        methods: {
            toggle_class(){
                return this.is_active ? this.is_active = false : this.is_active = true
            }
        }
    })
</script>
copy
Full Vue cheatsheet