How to change element.style in vue.js?
How to change element.style in vue.js?
1 answer
by
shyann ,
2 months ago
@lizzie
In Vue.js, you can change the element.style by using the v-bind or :style directive. Here is an example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<template>
<div :style="{ color: textColor, fontSize: textSize + 'px' }">Text</div>
</template>
<script>
export default {
data() {
return {
textColor: 'red',
textSize: 16
}
},
methods: {
changeStyle() {
this.textColor = 'blue';
this.textSize = 20;
}
}
}
</script>
|
In this example, the element's text color and font size will be bound to the data properties textColor and textSize. When the changeStyle method is called, these properties will be updated, and the element's style will change accordingly.