Vuejs Course


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 defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
}
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}
Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
VueJS - Binding, v-bind

Last accessed pages

  1. querySelector and querySelectorAll (16181)
  2. Create ZIP file archive with PHP (1611)
  3. HTML Course - Free Lessons (16450)
  4. Read Excel file data in PHP - PhpExcelReader (77578)
  5. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (107228)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (471)
  2. Register and show online users and visitors (334)
  3. JavaScript Course - Free lessons (248)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (248)
  5. querySelector and querySelectorAll (235)