Dynamic CSS Classes Vue

by Megi93

HTML

<div id="vue-app">
    <h1>Dynamic CSS</h1>
    <h2>Example 1</h2>
    <!--in {this is object} -->
    <!-- <div @click="available = !available" v-bind:class="{available: available}">
        <span>Roy</span>
    </div> -->
    <h2>Example 2</h2>
    <button v-on:click="nearby = !nearby">Toggle nearby</button>
    <button v-on:click="available = !available">Toggle available</button>
    <div v-bind:class="compClasses">
        <span>Roy</span>
    </div>
</div>

CSS

span {
    background: red;
    display: inline-block;
    padding: 10px;
    color: #fff;
    margin: 10px 0;
}

.available span {
    background: green;
}

.nearby span:after {
    content: "nearby";
    margin-left: 10px;
}

JavaScript

new Vue({
    el: '#vue-app',
    data: {
        available: false,
        nearby: false
    },
    methods: {

    },
    computed: {
        compClasses: function() {
            return {
                nearby: this.nearby,
                available: this.available
            }
        }
    }
})