Style binding vue js 3

 

Style binding

====================================================================================================

//simple way style binding noy vue js style binding

//html

  <div id="app">

    <input type="text" v-model="bgcolor">

      <div class="card" :style="'background-color:' + bgcolor">Card</div>

    </div>

//js

var app = Vue.createApp({

    data(){

        return{ 

            bgcolor: 'red'

          

        };  

        

    },

    methods: {   

        

    }    

});

app.mount('#app');

//style

.card{

    width: 100px;

    height: 100px;

    border: 1px solid navy;

}

---

<div id="app">

    <input type="text" v-model="bgcolor">

      <div class="card" :style="{'background-color':  bgcolor}">Card</div>   //vue js style binding

    </div>

---

<div id="app">

    <input type="text" v-model="bgcolor">

      <div class="card" :style="{backgroundColor:  bgcolor}">Card</div>  //javascript 

    </div>

--

<input type="color" v-model="bgcolor"> //use this code for display live effect show

...................................