1. Home
  2. Vue
  3. Toggle class
#vue#class

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

<div id="app">
    <button v-bind:class="{ 'toggled' : toggleState }" v-on:click="toggle">Toggle</button>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            toggleState: false
        },
        methods: {
            toggle(){
                this.toggleState = true;
            }
        }
    })
</script>
copy
Full Vue cheatsheet
Sitemap Git repository