Change CSS class property with Vue.js

Question

I'm using Vue.js and I want to change a CSS class property. The HTML code which uses the class is the following:

<div class="fillTimerBar"></div> 

And the CSS code:

.fillTimerBar {         width: 100%;         height: 8px;  } 

From there I want to change the width class property using a computed property from the Vue component.

Which would be correct way if any?

Answer 1

You have to use v-bind:style directive.

var vm = new Vue({    el: '#example',    data: {       width:'200px'    },    computed: {      computedWidth: function () {        return this.width;      }    },    methods: {      changeWidth: function (event) {        this.width='100px';      }    }  })

#myDiv{    background-color:red;    height:200px;  }

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>    <div id="example">    <div id="myDiv" v-bind:style="{ width: computedWidth }"></div>    <button v-on:click="changeWidth()">Change</button>  </div>