スポンサーリンク

Vue.js v-bindでhtmlの属性に値を入れる

公式ドキュメントの項目:宣言的レンダリングで、v-bindを使っているところの解説をします。

まずは、コードを書いてみます。

 

サンプルコード html

 

実行結果(テキストにマウスを合わせるとポップアップが出ます)

解説

実行結果の重要な部分としては、テキストにカーソルを合わせるとdataで設定したmessageがポップアップが出るところです。

Vueインスタンスで、メッセージを設定して、

<span v-bind:title=”message”>のところで、title属性にmessageの値を入れることで、

ポップアップが出るようになっています。

まとめ

  • v-bind:属性名=”Vueインスタンスのdataで設定したキー”で属性に値を入れられる。

 

 

Vue.js
スポンサーリンク
シェアする
trelab