Before going to topic, we will see 'What is Databinding?' Databinding means binding data from one part to another part.For eg:- data is in script section and the attribute to bind is in DOM section. During databinding process, whenever data is changed in data part,it is reflected immedietely in elements of the DOM OR HTML section In todays topic, we will learn about assign values to HTML attributes.The command used for binding data is called v-bind. Now we will look into the example of binding, so that you can understand better.
scenario: We need to bind Name,Age and gender.
<html>
<head>
<title>
<script type=text/javascript src=js/vue.js><script>
<head>
<body>
<div id=dvDataBinding>
<h2>Personal Details<h2><br>
{{Name}}
{{Age}}
{{Gender}}
<div>
<script type=text/javascript>
var vm=new vue({
el:'#dvDataBinding',
data: {
Name:'Lord Muruga',
Age:26
Gender:'Male'
}
});
<script>
<body>
<html>
In above example, we have shown you three variables 'Name', 'Age' and 'Gender' and also assigned a value to that variable in data part of script section.
Whatever data you change in data part that will be reflected in vue page.
Now if we will see the following output in the browser.
Name: Lord Muruga
Age: 26
Gender:Male
To bind HTML class, we need to call v-bind attribute to HTML elements.Let us understand this by an example. Come let's see, Example:-
<HTML>
<head>
<title>Binding HTML CLASS <title>
<script type=javascript src=js/vue.js>
<head>
<Body>
<style>
.isChangeBackground
{
background:blue;
}
<style>
<div id=classbinding>
<div v-bind:class="{isChangeBackground::isChangeBackground}">
<div>
<script type=javascript>
var vm=new Vue({
el:'#classbinding',
data:{
isChangeBackground:true
}
});
<script>
<Body>
<HTML>
if we change isChangeBackground proptery in data section to false,then title background will not be in blue color.Suppose if we want title background to be displayed in blue color then we can change the isChangebackground property in data section to true.