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?
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>
To change a property inside a class, you can use CSS custom properties:
.fillTimerBar {
--width: 100%;
width: var(--width);
height: 8px;
}
In Vue, you can bind CSS variables to the style:
<div class="fillTimerBar" :style="`--width: ${computedWidth}`"></div>
:style="`--var-1: ${computed1}; --var-2: ${computed3}; --var-3: ${computed3};"`You can use plain old javascript to add a new class to your div, then add css properties to elements that have the new class and your existing class. The CSS code if you wanted the width to be half (the more specific rule takes precedence):
.fillTimerBar {
width: 100%;
height: 8px;
}
.fillTimerBar .HalfWidth {
width: 50%;
}
