Vue js Bind multiple style properties:In Vue.js, you can bind multiple style properties to an element using the v-bind directive. The v-bind directive allows you to dynamically bind data to an attribute or a property of an element. To bind multiple style properties, you can create an object that contains the property-value pairs of the styles you want to apply. You can then use the object as the value of the v-bind:style directive.
How can add multiple style properties be bound using Vue js?
In Vue.js, you can bind multiple style properties to an element by using an object syntax for the :style directive. Each property in the object should be a valid CSS property and its value should be a Vue.js data property or a computed property.
In the provided code, the :style directive is used to set the font-size, color, and background-color properties of the <p> element. These properties are bound to the fontSize, fontColor, and bgColor data properties respectively.
Vue js Bind multiple style properties Example
<div id="app">
<div>
<p :style="{ 'font-size': fontSize + 'px', color: fontColor, 'background-color': bgColor }">{{ text }}</p>
<button @click="incrementFontSize">Increase Font Size</button>
</div>
</div>
<script type="module">
const app = new Vue({
el: "#app", // Set the root element of the app
data() {
return {
message: 'Hello Vue!',
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
fontSize: 16,
fontColor: '#333333',
bgColor: '#f0f0f0'
}
},
methods: {
incrementFontSize() {
this.fontSize += 2;
}
}
});
</script>
Output of Vue js Bind multiple style properties
