Types of data binding with template in Vue.js

In this article, we will see different ways to bind data with the template in Vue.js, along with understanding their implementation through the examples.

When we wish to utilize our variables or data within the template, we generally use the mustache syntax(double curly braces). However, this isn't permitted in Vue for HTML elements. In order to use the HTML elements, we must use a bind to connect our data to them. The Data Binding facilitates binding the data to the template, which helps to render to the view component. Vue provides its own set of directives used to dynamically bind our data to the templates. 

Text Binding: It is used when we need to bind the content of any HTML in Vue. The syntax for using text binding is by using the v-text directive in any HTML element and a data property should be assigned to it. For instance, the data inside the <script> tag can be displayed with the help of the<template> tag that contains the v-text directive having the value that is to be rendered.

Example: In the below example, we have bound the data that is the name having the value, with the v-text directive, declared in the <div> tag.

<template>
  <div style="text-align: center;
              width: 600px">
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b> Data Binding Type </b>
  </div>
  <div v-text="name" 
       style="text-align: center">
  </div>
</template>

<script>
  export default {
    name: "App",
    data() {
      return {
        name: 
   "This content is redered with the help of v-text directive",
      };
    },
  };
</script>

Output:

We can bind our data ie., the name to the div tag using the v-text directive to dynamically bind our data to the HTML so that when we change the name to some other value, the changes will be reflected in the HTML template.

HTML Binding: It is the way of having some string data stored as any HTML to be used within any div tag. So the content of the div tag would be as per the HTML we have bound to it. The Syntax to use HTML binding is by using the v-html directive and specifying the data property to it. The v-html directive is used to update an element’s innerHTML with our data. 

Example: In the below example, we have enclosed the string with the <b> tag. If we used v-text to bind the name data, it would show output along with the tags. But to actually apply the HTML element, we need v-html.

<template>
  <div style="text-align: center">
    <h1 style="color: green">GeeksforGeeks</h1>
    <b> Data Binding Type </b>
  </div>
  <br />
  <div v-html="name" 
       style="text-align: center">
 </div>
</template>

<script>
  export default {
    name: "App",
    data() {
      return {
        name:
"
<p>Welcome to <b>GeeksforGeeks</b> Learning. 
<br>A Computer Science portal for geeks.</p>
",
      };
    },
  };
</script>

Output:

We can even bind the HTML to the template using the v-html directive which would apply the respective HTML tags to the bound data. We can even have anchor tags bound to the data.

Attributes Binding: It is used to dynamically bind properties to the attributes. We can't bind attributes using the mustache syntax " {{ }} " in Vue js. To set the value of attributes using our data, we need to use the v-bind directive. The Syntax for attributes binding is using v-bind: and then followed with respective attributes. 

Note: The attributes to be bound using v-bind: should be declared in the data return statement otherwise it will throw an error.

Example: In the below example, we have bound the disabled property to the button tag, disabled specifies that the button is unclickable and cannot be used. We have bound it to the isDisabled data property which is a boolean value, set as true. So, we can use attribute binding to have a disabled submit button until a particular form is fully filled and toggle the data property to again enable it upon completing the form.

<template>
  <div style="text-align: center">
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b> Data Binding Type </b>
  </div>
  <br />
  <div style="text-align: center">
    <p>Subscribe to GBlog Channel</p>
    <button v-bind:disabled="isDisabled">
      Subscribe
    </button>
  </div>
</template>

<script>
  export default {
    name: "App",
    data() {
      return {
        isDisabled: true,
      };
    },
  };
</script>

Output:

We can bind the attributes of the HTML elements using the v-bind directive which would dynamically apply the properties to the respective HTML elements. For eg., we can bind the disabled attribute to data called isDisabled to toggle the state of the button.

Classes Binding: Like Attribute Binding, we can bind the classes used for CSS to data values using the classes binding. Any HTML tag can be assigned class names using the v-bind:class directive. The Syntax is to use v-bind: followed by class and set the value to any data variable. We can have multiple classes by adding to an array ( v-bind:class = " [ status, promoted ] ") which will apply both CSS classes to the HTML tag. By binding classes to data, we can programmatically change the UI based on events like changing the background color of any button on clicking it to make the UI interactive. To have conditional classes we can have any boolean value followed by && to have the functionality of setting the class based on some conditional statements.

Example: In the example below, we have conditionally set the class of a <h2> tag with isCondition followed by && where isCondition is true as declared in data, So the class which is enclosed in quotes ( promoted ) will be applied to the <h2> tag ( We have defined the promoted class in the styles ).

Note: The classes should be declared in the styles tag in the Vue file. 

<template>
  <h2 v-bind:class="status">Status</h2>
  <h2 v-bind:class="isCondition && 'promoted'">
    Condition
  </h2>
</template>

<script>
  export default {
    name: "App",
    data() {
      return {
        status: "danger",
        isCondition: "true",
      };
    },
  };
</script>

<style scoped>
  .danger {
    color: red;
  }

  .promoted {
    font-style: italic;
  }
</style>

Output:

We can dynamically bind the classes for the HTML using the v-bind directive and change classes on basis of some functions or events. Conditional classes can also be used using the && along with a boolean data variable.

Styles Binding: Like CSS selectors, we can have the same styles for different HTML elements with the help of styles binding and even change the styles dynamically whenever required. As we know, for styles, we have 2 options either have inline styles or define them in the style tag but we can also link the styles to our data values using the Styles binding. The Syntax for styles binding is v-bind: followed by style and set the style to values in our data section. In the case of Inline Styling, we can have different data values and set them as we do in normal HTML. The major advantage of style binding is that we can change the data programmatically which would in turn change the styles applied as we can change the style for any class or id dynamically.

Example: In the example below, we set the style of <h2> tag with CSS properties linked with our data (color linked with someColor which has a value of orange, font-size linked with headerSize which has a value of 25 ). We can even create a data object with keys as CSS properties and values as shown in the <h2> tag where we linked the style with dataStyle which in turn is an object having color, fontSize, and padding properties.

<template>
  <h2
    v-bind:style="{
      color: someColor,
      'font-size': headerSize + 'px',
    }" >
    Inline Styles
  </h2>
  <h2 v-bind:style="dataStyle">Data Style</h2>
</template>

<script>
  export default {
    name: "App",
    data() {
      return {
        someColor: "orange",
        headerSize: 25,
        dataStyle: {
          color: "orange",
          fontSize: "50px",
          padding: "20px",
        },
      };
    },
  };
</script>

Output:

We can also apply inline styles using the v-bind binding to dynamically bind the data along with any static values to our styles and change them according to any function or algorithm. Create styles object in the data and link the same to any HTML element to reduce writing the styles again and again for every element. If we want to separate styles to different data objects, apply multiple objects by inserting them inside [ ] brackets or arrays.

As we can see from the above that whenever we want to bind to any HTML attributes, we need to use v-bind: to do so ( for example v-bind:class, v-bind:id, v-bind: style, etc. ) which can become repetitive to have v-bind. So, we can replace v-bind: with only : ( for eg :class, :style, :id, etc. ).