スポンサーリンク

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

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

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

 

サンプルコード html

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app-2">
      <span v-bind:title="message">
        Hover your mouse over me for a few seconds
        to see my dynamically bound title!
      </span>
    </div>
  </body>
</html>
<script>
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})
</script>

 

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

解説

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

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

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

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

まとめ

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

 

 

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