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
Table of Contents
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:
- How to bind dynamic attributes to the elements using vueJs
- How to bind dynamic class name to the elements using vuejs
- 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!
