vuejs toggle class – vue js v-class – Dynamic Components in Vuejs

vuejs toggle class – vue js v-class – Dynamic Components in Vuejs

We can pass some an object data to v-bind:class using vue to dynamically toggle switch on or off classes and A common reqired to need for your data binding is manipulating some an element’s add or remove class list and its new inline styles.

Dynamically Binding Styles

Vue.js some allows for binding styles suppoted and classes dynamically (add or remove class using vuejs) to elements with the directives of vuejs (v-bind:style) and (v-bind:class) directives.

READ :  Vuejs Introduction Advanced Features Hello World Example

Binding Dynamic multiple styles to an HTML element : Example 1

[php]

Your Dynamic Font size is: {{ fontSize }}

[/php]
[php]
data: {
isenable: true,
isdisable: false
}
[/php]

index.html : Example 2

[php]

VueJS Simple Example

[/php]

index.js

[php]
new Vue({
el: ‘body’,
data: {
livecol: true
},
methods: {
flipSwitch: function() {
this.livecol = !this.livecol;
}
}
});
[/php]

style.css

[php]
.body-on {
background-color: #4285F4;
}
.body-off {
background-color: #FBBC05;
}
.height-2 {
min-height: 10em;
}
.btn {
border-radius: 5em;
height: 100px;
width: 100px;
outline: none;
background: none 0;
border: solid thin #444444;
color: #eeeeee;
font-size: 3em;
}
.btn-danger {
background-color: purple;
color: #4285F4;
}
.btn-success {
background-color: green;
color: #FBBC05;
}
.text-center {
text-align: center;
}
[/php]

READ :  AngularJS – How to Pass Parameters to Controllers on Initialization

Example

Example

Leave a Reply

Your email address will not be published. Required fields are marked *