Binding inline styles

With v-bind:style we can dynamically set CSS style properties in html tags.
- Syntax:
<div v-bind:style='{propName:value, otherProp:value}'>content</div>

If you want to use CSS notation (with dash '-'), put the property name between quotes:
<div v-bind:style='{"prop-name":value, "other-prop":value}'>content</div>

- Example, increase and decrease the font-size with two buttons:
<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>

You can bind to a style the object with CSS properties defined directly in Vue data.
- Example:
<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>

Array of styles

We can add an array with multiple style objects to the v-bind:style directive

- Example:
<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>

Binding CSS Classes Dynamically

With v-bind:class we can dynamically set CSS clases to html elements.
- Syntax:
<div v-bind:class='{class_name: addClass}'>content</div>
The class_name is added to class attribute when the addClass property is True.
v-bind:class can also coexist with the plain class attribute.

- Example, we build a menu with 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>

You can have multiple classes toggled by having more fields in the object.
- Syntax:
<div class='a_clas' v-bind:class='{class_name:addClass, class_2:addCls2}'>content</div>

Multiple classes added into an Array

We can pass an array to v-bind:class to apply a list of classes from data object.
- HTML:
<div v-bind:class='[active_cls, error_cls]'>Content</div>
- In Vue JS:
data: {
 active_cls: 'active',
 error_cls: 'error_msg'
}
Which will render:
<div class='active error_msg'>Content</div>

CSS class in Vue Components

When you use the class attribute on a custom component, those classes will be added to the component's root element. Existing classes will not be overwritten.

- Example with a component:
<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 class='cls_a cls_b cls_comp'><h3 class='cls_title'>Title</h3><div>Content</div></div>

- The same is with class bindings in component:
<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:
<div class='cls_a cls_b cls_comp'><h3 class='cls_title'>Title</h3><div>Content</div></div>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which attribute is used in <a> tag for the address of the link?
src href rel
<a href="http://coursesweb.net/" title="CoursesWeb.net">CoursesWeb.net</a>
Which CSS property sets the type of the text font?
font-family text-decoration font-size
h2 {
  font-family:"Calibri",sans-serif;
}
What instruction selects all the <div> tags with class="cls"?
querySelector("div.cls") getElementsByTagName("div") querySelectorAll("div.cls")
var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length;       // number of selected items
alert(nr_elms);
Indicate the function that can be used to get the sum of values in an array.
array_sum() array_diff() array_shift()
$arr =[1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum;       // 10
Class and Style with Vue.js

Last accessed pages

  1. Zodiac Signs JavaScript code (5876)
  2. MySQL Query Builder: Database Pagination (404)
  3. Clear Canvas Context (5487)
  4. querySelector and querySelectorAll (13568)
  5. Get and change IFrame content through a JavaScript script created in another IFrame (9951)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (2753)
  2. Contact page - CoursesWeb (2660)
  3. Tabs effect with CSS (2656)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (866)
  5. PHP getElementById and getElementsByTagName (746)