Vue.js Binding

A common need for the data binding is to control the element’s class list and its inline styles. Since the class list and inline style are both attributes, we can use the v-bind to handle both attributes. Here, we only have to calculate a final string with our expressions. However, it is annoying and mistaken to interact with the new string. Due to this, Vue provides special changes in the class list and inline style when v-bind is used. In addition to strings, we can also evaluate the objects or arrays.

Example: This example explains how we can use the Vue.js binding in the Vue.js application.

Index.Html

Output: After executing the above code, we will get the output, as shown below:

Vue.js Binding

In the above example, we can see the first Click Here option that shows the href as a hreflink, and the second Click Here option shows the correct URL as we want. When we click on the Click Here option, it navigates to the page which we added in that option.

Binding HTML Classes

If we want to bind the HTML classes, it is required to use the v-bind: class property. Here, the isactive is a variable, which is based on the true or false value. In the data object, specify the isactive variable as true value. There is a class defined in the style tag .active that can be set any background color whatever we want. If the isactive variable value is true, the background color will apply, otherwise not.

Example: This example explains how we can use the binding HTML classes with Vue.js binding.

Index.html

Output: After executing this code, we will get the output, as shown below:

Vue.js Binding

If we set the value of isactive variable to false, then it shows the normal output, as shown below:

Main.js

Output: After executing this code, we will get the output, as shown below:

Vue.js Binding

We can also apply multiple classes to the HTML tags using v-bind attributes with .active, div, .info, and .displayerrors variables. We can set the value of variable according to our need. These variables should be applied in <style> tag.

Index.Html

Main.js

Output: After executing this code, we will get the output, as shown below:

Vue.js Binding

Inline Binding Styles

In the inline binding style, we can apply the style in the div tag and fetch the data from the data object. To set the data objects, we can use the following syntax:

Syntax:

Example: This example explains how we can use the inline binding style in the Vue.js binding property.

Index.html

Main.js

Output: After executing the above code, we will get the output, as shown below:

Vue.js Binding

In the above example, we have seen that how the data objects could be applied in the div tag. On the other hand, we can also do the same thing by assigning the values to a variable and then assign the variable to the div. We can use the styleobj object to assign the values of the object and then assign it to the div.

Example: This example explains how we can use the styleobj object in the Binding property.

Index.Html

Main.js

Output: After executing this code, we will get the output, as shown below:

Vue.js Binding

Form Input Bindings

If we want to create a form, we can use the form input bindings. Here, we are going to use the v-modal attribute instead of v-bind and also use the radio and select buttons in the form. Let’s take an example to understand it more clearly:

Example: This example explains how we can create a form in the Vue.js binding.

Index.Html

Main.js

Output: After executing this code, we will get the output, as shown below:

Vue.js Binding

After filling all the fields, it shows the data in detail at that time, as shown below screenshot.

Vue.js Binding

Modifiers

We can also use the modifiers in the Vue.js binding. Modifiers are many types, such as trim, number, and lazy.

Trim: Trim modifier is used to remove the spaces entered at the beginning and the end.

Number: The Number modifier is used to only enter the numbers. It does not take any input besides numbers.

Lazy: Lazy modifier is used to display the content of the textbox. Once we fill all the fields and leaves the textbox, then it displays the content.

Example: This example explains how we can use the modifiers in the Vue.js binding.

Index.html

Main.js

Output: After executing this code, we will get the output, as shown below:

Vue.js Binding

When we entered something in the textbox, the output will display like the below output:

Vue.js Binding

Pin It on Pinterest

Share This