Home VueJS VueJS 2.0 dynamic Attribute binding Class Name binding

VueJS 2.0 dynamic Attribute binding Class Name binding


In this tutorial you will learn dynamic Attribute binding Class Name binding in vuejs, dynamic meaning real time data binding from vuejs to the DOM elements, for example bind alt attribute to image, title attribute to button and class name binding to html elements as per requirements

In last tutorial I have given a detail on you can get started with VueJS 2.0, basic data binding, data listing, use of vuejs directives and so on, if you are not aware of this things you read from the last tutorial from here – VueJS 2.0 data binding, Listing Data, Render Select Field Options

How to Bind Attribute in VueJS:

We often needs to bind dynamic attribute to elements as per application requirements let see how we do that in vuejs in the example below:

If you see in the above example to bind dynamic attribute in vuejs you need to use v-bind  or : as prefix to the attribute for example v-bind:title="title"

You can check out the live example below, over cursor for a second to the example button and checkout the title attribute:

Live VueJS Attribute binding Example:

How to bind dynamic Class Name in VueJS:

As we have seen in the attribute binding we have used v-bind to bind the attribute, so same thing is here to bind class name, let’s see in the example below:

Live VueJS Class name Binding Example:

Check out the above code from the example script, we have a declared class in the head section using style tag and our class name is example-class move on to the body section we have <h2 :class="className">Example Heading Tag</h2> where className will have a dynamic value using vueJs.

If you notice we are using v-bind alternative that a :.

Let’s little bit more on vueJS class name binding:

VueJS Conditional Class Name Binding:

Conditional class name binding means a class can be depend on Boolean value, we might needs to apply a class to the heading tag when we click something from the page.

Let’s see conditional class name binding in real time example:

Live VueJs Conditional Class Name Binding Example:

Conclusion of the tutorial:

What you have learned from this tutorial, make sure to note down following points:

  1. How to bind dynamic attributes to the elements using vueJs
  2. How to bind dynamic class name to the elements using vuejs
  3. how to bind conditional class name using vuejs

In next tutorial you will learn how to handle events in vuejs, how we can deal with methods and also we will create a simple to do list application using vuejs.

Next Tutorial – How to Handle Events in VueJS 2.0

Previous Tutorial – VueJS 2.0 data binding, Listing Data, Render Select Field Options

Happy Learning!

Enjoy this tutorial? Get iTech Empires updates delivered straight to your inbox.

No Spam, ever. We'll never share your email address and you can opt out at any time.

Yogesh Kolihttp://www.itechempires.com
Yogesh Koli is a software engineer & Blogger lives in India. He's driven by an addiction to learning and a love for adventure. he has 6+ years of experience working with the front-end and back-end web application development.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Notify of

Tutorials You May Like!

- Advertisement -