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>
    <input type="text" v-model="color">
// 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 *