Dynamic CSS class change example with Vue Leave a comment

Start from html and css lets create three box:

// Html
<div id="app">
    <div class="demo" :class="color"></div>
    <hr/>
    <input type="text" v-model="color">
</div>
// Css
.demo {
    width: 100px;
    height: 100px;
    background-color: gray;
    display: inline-block;
    margin: 10px;
}

.red {
    background-color: red;
}

.green {
    background-color: green;
}

.blue {
    background-color: blue;
}

Use vuejs data property and define color;

new Vue({
    el: '#app',
    data: {
        color: 'green',
    }
});

Leave a Reply

Your email address will not be published. Required fields are marked *