v-bind is a VueJS directive used to dynamically bind one or more attributes, or a component prop to an expression.

Dynamic values to HTML attributes

The v-bind directive can be used to reactively update an HTML attribute.

- Syntax:
v-bind:attribute_name='value'

- Example, dynamically set the src attribute of a <img> tag:
<div id='demo'>
 <img v-bind:src='img' alt='Image' />
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data: {img:'/imgs/dolphin.jpg'}
});
</script>
VueJS also provides a shorthand for v-bind, it is replaced by the two-point character ":", as follows.
<img :src='img'/>

We can also bind an object of attributes to a single v-bind.
<tag_name v-bind='{attribute_1:variable_1, attribute_2:variable_2}'>Content</tag_name>

- In the following example we dynamically set the src and class attributes with one v-bind:
<style'>
.st_img {
border: 7px solid #e0e000;
height:110px;
margin:35px 2px 2px 20px;
transform: rotate(40deg);
}
</style>

<div id='demo'>
 <img v-bind='{src:img, class:im_cls}' alt='Image'/>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data: {
 img:'/imgs/dolphin.jpg',
 im_cls:'st_img'
 }
});
</script>

Binding HTML Style and Classes

When the v-bind is used to bind the class or style attribute, it supports additional value types such as Array or Objects.

Examples with html style

<div :style="{ fontSize: size + 'px' }"></div>
<div :style='[style_obj1, style_obj2]'></div>

Examples with html class

<div :class='{ red: is_red }'></div>
<div :class='[class_a, class_b]'></div>
<div :class='[class_a, { class_b: is_b, class_c: is_c }]'></div>
- For more details about binding html style and class, see the tutorial: Class and Style with Vue.js

Dynamic attributes with v-bind

We can use dynamic arguments, by wrapping it with square brackets.
- Syntax:
<img v-bind:[attr_name]='value'/>

// shorthand
<img :[attr_name]='value'/>

- In the following example we dynamically set an ID attribute to an image:
<style'>
#im_rot {
border: 7px solid #ffbe00;
height:110px;
margin:35px 2px 2px 20px;
transform: rotate(40deg);
}
</style>

<div id='demo'>
 <img :src='img' :[attr]='atr_val' alt='Image'/>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data: {
 img:'/imgs/dolphin.jpg',
 attr:'id',
 atr_val:'im_rot'
 }
});
</script>

v-bind and Components

v-bind can be used to pass data from parent to child components, using props property.
- Syntax:
<component_name :prop='item'></component_name>

- In the following example we bind the text variable in component parent to pass its value from Vue instance to component's template:
<div id='demo'>
 <comp_h :text='ar_txt[0]'></comp_h>
 <comp_h :text='ar_txt[2]'></comp_h>
</div>

<script>
// Define a new component called comp_h
Vue.component('comp_h', {
 props: ['text'],
 template: '<h3>{{text}}</h3>'
});

//array with data for text in component
const ar_t =['Peace is good.', 'I`m wise.', 'I Keep and give my peace.'];

// Create a Vue instance
new Vue({
 el: '#demo',
 data:{
 ar_txt: ar_t
 }
});
</script>
- For more details about Vue components, see the tutorial: Vue JS Components

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block
.some_class {
  display: list-item;
}
Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
VueJS - Binding, v-bind

Last accessed pages

  1. jQuery Course (1840)
  2. Display UL bullets and OL numbers on the right side (2997)
  3. JavaScript strip_tags and stripslashes (4408)
  4. Simple Admin Login PHP Script (4416)
  5. Node.js Move and Copy file (14968)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1998)
  2. Contact page - CoursesWeb (1942)
  3. Tabs effect with CSS (1941)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (618)
  5. Insert, Select and Update NULL value in MySQL (488)