v-bindでaタグの属性値を動的に表現する。 ❏Vue.js❏

v-bind:属性="データのプロパティ"とかで動的に表現できるみたい。

しかも:属性="データのプロパティ"と省略可。

実際に見ていくぅ！

開発環境はJSFiddle
https://qiita.com/ITmanbow/items/9ae48d37aa5b847f1b3b

html

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <a :href="url">google</a>
</div>

javascript

new Vue({
  el: "#app",
  data: {
    url: "https://google.com"
  }
})

【出力結果】
google
クリックするとちゃんとgoogleに飛びます。

複数の属性を指定したい場合

【結論】オブジェクトを渡してあげる。

html

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <a v-bind="googleObject">google</a>
</div>

javascript

new Vue({
  el: "#app",
  data: {
    googleObject: {
      href: "https://google.com",
      id: 3
    }
  }
})

idが3でgoogleに飛ぶaタグが完成します。

以上！

ではまた！