How to bind HTML attributes in Vuejs?

In this article, we will learn how to bind 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 the src attribute to display the image.

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

The problem is that the curly braces {{}} syntax cannot bind data in html attributes.

<img src="{{image}}" /> //wrong: doesn&#39;t display any image

In order to bind data in HTML attributes, Vuejs provides us with a directive v-bind:atrributename.

<img v-bind:src="image" /> // 用户现在可以看到图像

Here the v-bind directive binds the element's src attribute to the value of the expression image.

If we use the v-bind directive, we can evaluate JavaScript expressions inside quotes v-bind:src="js expression".

v-bind:attributenameYou can also write abbreviated syntax: 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>

This article is about the method of binding HTML attributes in Vuejs. I hope it will be helpful to friends in need!

The above is the detailed content of How to bind HTML attributes in Vuejs?. For more information, please follow other related articles on the PHP Chinese website!