Vue Js Change Backgroud Color using Radio Button: To change the background color of a Vue component using a radio button, you can create a data property in your Vue component and bind it to the selected value of the radio button using the v-model directive. Then, you can use a computed property to generate a style object based on the selected value, and bind this object to the :style binding of the component. The style object should have a “background-color” property with the selected value as its value. This way, when the user selects a different radio button, the data property will update and the background color of the component will change accordingly.

How can you use radio buttons to change the background color in a Vue.js application?

This code is an example of using Vue.js to change the background color of a content div based on a selected radio button.

The code includes a Vue instance that is mounted on the HTML element with an id of “app”. Inside the instance, the data property is defined with a single property named “selectedColor”, which is initially set to ‘red’.

The radio buttons are defined with the v-model directive, which binds their values to the selectedColor property. The content div uses the v-bind directive to dynamically set its background color based on the selectedColor property.

As the user clicks on different radio buttons, the selectedColor property changes, which updates the background color of the content div.

Vue Js Change Background Color using Radio Button Example

<div id="app">
        <h3>Vue Js Change Background Color using Radio Button </h3>
        <label>
            <input type="radio" v-model="selectedColor" value="red"> Red
        </label>
        <label>
            <input type="radio" v-model="selectedColor" value="blue"> Blue
        </label>
        <label>
            <input type="radio" v-model="selectedColor" value="green"> Green
        </label>
        <div :style="{ backgroundColor: selectedColor }">
            This is the content with a background color.
        </div>
</div>
<script>
        new Vue({
            el: '#app',
            data() {
                return {
                    selectedColor: 'red',
                }
            },
        });
 </script>

Output of Vue Js Change Backgroud Color using Radio Button