Vuejs で HTML 属性をバインドするにはどうすればよいですか?

この記事では、vuejs で HTML 属性をバインドする方法を学びます。

これが開始コードです。

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

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

上記のコードでは、画像を表示するために src 属性のデータをバインドする必要があります。

data には image:"logo.png" 属性があります。次に、src 属性を image にリンクする必要があります。 プロパティを使用して画像を表示できるようにします。

問題は、中括弧 {{}} 構文では HTML 属性のデータをバインドできないことです。

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

データを HTML 属性にバインドするために、Vuejs はディレクティブ v-bind:atrributename を提供します。

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

ここで、v-bind ディレクティブは、要素の src 属性を式 image の値にバインドします。

v-bind ディレクティブを使用すると、引用符で囲まれた JavaScript 式 v-bind:src="js 式" を評価できます。

v-bind:attributenameattributename という省略構文を記述することもできます。

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

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

同様に、この構文は他の HTML 属性でも使用できます。

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

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

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

この記事は、Vuejs で HTML 属性をバインドする方法に関するものです。困っている友人の役に立てば幸いです。

以上がVuejs で HTML 属性をバインドするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。