Class binding vue js 3
Class binding
===============================================================================
//this is not a class binding this is a attribute binding
//html
<div id="app">
<button @click="setClass('red')">Red</button>
<button @click="setClass('green')">Green</button>
<button @click="setClass('blue')">Blue</button>
<br>
<div :class="activeClass"></div>
</div>
//js
var app = Vue.createApp({
data(){
return{
activeClass: 'red'
};
},
methods: {
setClass(className){
this.activeClass = className;
}
}
});
app.mount('#app');
//style
.red{
width: 200px;
height: 200px;
background-color: red;
}
.green{
width: 200px;
height: 200px;
background-color: green;
}
.blue{
width: 200px;
height: 200px;
background-color: blue;
}
........................................
//this is class binding with vue js
//html
<div id="app">
<button :class="{active: activeClass =='red' }" @click="setClass('red')">Red</button>
<button :class="{active: activeClass =='green' }" @click="setClass('green')">Green</button>
<button :class="{active: activeClass =='blue' }" @click="setClass('blue')">Blue</button>
<br>
<div :class="activeClass"></div>
</div>
//js
var app = Vue.createApp({
data(){
return{
activeClass: 'red'
};
},
methods: {
setClass(className){
this.activeClass = className;
}
}
});
app.mount('#app');
//style
.red{
width: 200px;
height: 200px;
background-color: red;
}
.green{
width: 200px;
height: 200px;
background-color: green;
}
.blue{
width: 200px;
height: 200px;
background-color: blue;
}
.active{
background-color: rgb(3, 78, 97);
color: #fff;
border: 1px solid rgb(3, 78, 97);
}
...........................................................
No comments