Categories: VueJSVueJS 2.0

VueJS 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:

<!DOCTYPE html>
<html>
<head>
    <title>VueJS 2.0</title>
</head>
<body>

<div id="app">
    <button v-bind:title="title">Example Button</button>
</div>

<script src="https://unpkg.com/vue@2.3.4"></script>

<script>

    var app = new Vue({
        el: "#app",
        data: {
            title: 'This is dynamic title from VueJS'
        }
    });

</script>
</body>
</html>

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:

<!DOCTYPE html>
<html>
<head>
 <title>VueJS 2.0</title>

 <style type="text/css">
 .example-class{
 color: blue;
 font-size: 30px;
 }
 </style>
</head>
<body>

     <div id="app">
      <h2 :class="className">Example Heading Tag</h2>
     </div>

 <script src="https://unpkg.com/vue@2.3.4"></script>

 <script>
 
 var app = new Vue({
 el: "#app",
 data: {
 className: 'example-class'
 }
 });

 </script>
</body>
</html>

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:

<!DOCTYPE html>
<html>
<head>
 <title>VueJS 2.0</title>

 <style type="text/css">
 .example-class{
 color: blue;
 font-size: 30px;
 }
 </style>
</head>
<body>

     <div id="app">
      <h2 :class="{ 'example-class': className }">Example Heading Tag</h2>
      <button v-on:click="addClass()">Add class</button> <button v-on:click="removeClass()">Remove class</button>
     </div>

 <script src="https://unpkg.com/vue@2.3.4"></script>

 <script>
 
 var app = new Vue({
 el: "#app",
 data: {
 className: false
 },
 methods: {
 addClass: function()
 {
 this.className = true;
 },
 removeClass: function()
 {
 this.className = false;
 }
 }
 });

 </script>
</body>
</html>

Live VueJs Conditional Class Name Binding Example:

Conclusion:

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!

Yogesh Koli

Software engineer & Blogger lives in India, has 6+ years of experience working with the front-end and back-end web app development.

Recent Posts

Complete guide of using Laravel 6 Eloquent Subquery Enhancements

Learn How to use laravel frameworks new improved feature called Eloquent Subquery and get example of using Eloquent Subqueries and…

4 months ago

3 Useful examples of using Array Map function in PHP – Best Practices

Learn how to use php array map function with easy and essential tutorial to modify arrays in php here I…

4 months ago

Working with PHP Array Filter Function – Best Practices

Learn how to use php array filter function with easy and essential tutorial to filter array in php here I…

4 months ago

How to add Access Modifiers with Constructor Parameters in TypeScript

Want to know how to refactor your Typescript class, Learn here utilising Typescript of the best and essential feature that…

4 months ago

What is Access Modifiers and how to use Access Modifiers in TypeScript ?

What is Access Modifiers in typescript, how to use Access Modifiers, when to use them, what are the advantage of…

5 months ago

Top 10 Super Useful Packages to Improve Laravel applications in 2019

This tutorial provide ultimate list of package those are top 10 on packagist and super useful to optimize your laravel…

5 months ago