Menu
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?
659
Set Style Using element. One can use element. className to change various style parameters of an HTML element by clubbing those as a class and assigning the class name to the selected element with element. className . This method is helpful, especially in scenarios where we need to display an error in an input field.
Vue. js provides style binding that you can use to change the style dynamically. You can bind a variable to the style attribute in any HTML tag and change the style when the bound variable is changed.
With JavaScript, we are able to set CSS styles for one or multiple elements in the DOM, modify them, remove them or even change the whole stylesheet for all your page.
The only way to override the css is to get higher points of specificity. For example, adding the class . btn to the selector gets the same two points but it still looses because of the order of precedence. So, if we add another selector like .
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
