Vuejs Course


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
What attribute makes an option from <select> selected?
checked="checked" selected="selected" disabled="disabled"
<select name="a_name">
 <option value="val1">Option 1</option>
 <option value="val2" selected="selected">Option 2</option>
</select>
What CSS value allows to create color gradients for background?
contain repeat-x linear-gradient
#id {
  background: linear-gradient(top left, #1f1, #fff, #11f);
}
What statement creates an array in JavaScript?
[] {} new Object()
var arr = [1, "CoursesWeb.net", "MarPlo.net"];
alert(arr[2]);
Indicate the PHP function used to redirect to other page.
function() header() switch()
header("Location: http://coursesweb.net/");
exit;
Class and Style with Vue.js

Last accessed pages

  1. SHA1 Encrypt data in JavaScript (27873)
  2. Convert XML to JSON in PHP (10871)
  3. PHP Laravel Tutorials (2199)
  4. Register and show online users and visitors (37719)
  5. Wake Up! (14386)

Popular pages this month

  1. PHP Unzipper - Extract Zip, Rar Archives (38)
  2. JavaScript Course - Free lessons (28)
  3. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (26)
  4. HTML Course - Free Lessons (23)
  5. Wake Up! (18)