v-bind:style we can dynamically set CSS style properties in html tags.
<div id='demo'>
<button @click='fontSize++'>Increase font size</button>
<button @click='fontSize--'>Decrease font size</button>
<p v-bind:style='{color:color, fontSize:fontSize +"px"}'>Font size is: {{ fontSize }}</p>
</div>
<script>
var vm = new Vue({
el: '#demo',
data:{ color:'#00d', fontSize:12 }
});
</script>
<div id='demo'>
<p v-bind:style='styleOb'>This world is cured when the perception is corrected.</p>
</div>
<script>
var vm = new Vue({
el: '#demo',
data:{
styleOb:{color:'#00d', fontSize:'20px', fontWeight:700}
}
});
</script>
We can add an array with multiple style objects to the v-bind:style directive
<div id='demo'>
<p v-bind:style='[baseStyles, overrideStyles]'>The thought precedes the perception.</p>
</div>
<script>
var vm = new Vue({
el: '#demo',
data:{
baseStyles:{color:'#00d', fontSize:'20px', fontWeight:700},
overrideStyles:{color:'#fe1234'}
}
});
</script>
v-bind:class we can dynamically set CSS clases to html elements.class attribute when the addClass property is True.v-bind:class can also coexist with the plain class attribute.v-for. When an item in Menu is clicked, we set to be added a CSS class (here sel_li) to the current item. We use v-bind:class to set sel_li class to selected item:
<style>
.m_li {background:#ebebeb; cursor:pointer; display:inline; font-size:20px; margin:4px;}
.sel_li {background:#efef00; color:#00d; text-decoration:underline;}
</style>
<div id='demo'>
<ul>
<li class='m_li' v-for='li in lists' @click='sel_li =li' v-bind:class='{ sel_li: sel_li ==li}'>
{{li}}
</li>
</ul>
</div>
<script>
const menu_li =['Home', 'About', 'Contact'];
var vm = new Vue({
el: '#demo',
data:{
sel_li: menu_li[0],
lists: menu_li
}
});
</script>
v-bind:class to apply a list of classes from data object.<div v-bind:class='[active_cls, error_cls]'>Content</div>- In Vue JS:
data: {
active_cls: 'active',
error_cls: 'error_msg'
}
Which will render:
class attribute on a custom component, those classes will be added to the component's root element. Existing classes will not be overwritten.
<div id='demo'>
<comp_test class='cls_comp'></comp_test>
</div>
<script>
Vue.component('comp_test', {
template: "<div class='cls_a cls_b'><h3 class='cls_title'>Title</h3><div>Content</div></div>"
});
var vm = new Vue({el:'#demo'});
</script>
The rendered HTML will be:
<div id='demo'>
<comp_test v-bind:class='[add_cls]'></comp_test>
</div>
<script>
Vue.component('comp_test', {
template: "<div class='cls_a cls_b'><h3 class='cls_title'>Title</h3><div>Content</div></div>"
});
var vm = new Vue({
el:'#demo',
data:{add_cls: 'cls_comp'}
});
</script>
The rendered HTML will be:
<p>Address: <strong>http://CoursesWeb.net/</strong> - Tutorials.</p>
#id {
font-weight: 800;
}function someFunction() { alert("CoursesWeb.net"); }
setInterval("someFunction()", 2000);$vname = 8; echo $vname;