Comment lier les attributs HTML dans Vuejs ?

Dans cet article, nous apprendrons comment lier les attributs HTML dans vuejs.

Voici notre code de départ.

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

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

Dans le code ci-dessus, nous devons lier les données de l'attribut src pour afficher l'image.

À l'intérieur de data nous avons l'attribut image:"logo.png", nous devons maintenant lier l'attribut src à l'attribut image afin que nous puissions afficher l'image.

Le problème est que la syntaxe des accolades {{}} ne peut pas lier les données dans les attributs HTML.

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

Afin de lier les données dans les attributs HTML, Vuejs nous fournit une directive v-bind:atrributename.

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

Ici, la directive v-bind lie l'attribut src de l'élément à la valeur de l'expression image.

Si nous utilisons la directive v-bind, nous pouvons évaluer l'expression JavaScript v-bind:src="js expression" entre guillemets.

v-bind:attributename peut également écrire une syntaxe abrégée : attributename.

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

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

De même, nous pouvons utiliser cette syntaxe avec d'autres attributs HTML.

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

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

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

Cet article concerne la méthode de liaison des attributs HTML dans Vuejs. J'espère qu'il sera utile aux amis dans le besoin !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!