by Sai gowtham

How to bind HTML attributes in Vuejs

In this tutorial, we are going to learn about binding HTML attributes in vuejs.

This is our starting code.

<template>
  <div>
    <h1>Binding atrributes in {{title}}</h1>
    <img src="" />
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      title: "Vuejs",
      image: "logo.png"
    };
  }
};
</script>

In the above code, we need to bind the data of our src attribute to display the image.

Inside the data we have image:"logo.png" property, now we need to link our src attribute to image property so that we can display the image.

The problem is curly braces {{}} syntax doesn’t work to bind the data inside the html attributes.

<img src="{{image}}" /> //wrong: doesn't display any image

Attribute binding

To bind the data inside HTML attributes vue.js provides us a v-bind directive.

syntax usage.

<img v-bind:src="image" /> // user can see image now

Here v-bind directive binds the element src attribute to a image expression, so we can see the image.

Shorthand syntax

There is also a shorthand syntax of v-bind:attributename, which can be also written as just :attributename.


<!-- fullhand syntax -->
<img v-bind:src="image" />

<!-- shorthand syntax -->
<img :src="image"/>

Similarly, we can use this syntax with other HTML attributes.


<button :disabled="isActive">Click</button>

<a :href="url">My link</a>

<div :class="myClassname"></div>

v-bind directive evaluates the JavaScript expression present inside the quotes v-bind:src="js expression".

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2022 (Beginner + Advanced)
JavaScript - The Complete Guide 2022 (Beginner + Advanced)
116,648 students enrolled
52 hours of video content
$14.99 FROM UDEMY
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
631,582 students enrolled
49 hours of video content
$24.99 FROM UDEMY
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
203,937 students enrolled
31.5 hours of video content
$14.99 FROM UDEMY