【Vue.js】v-bindの記法について

v-bindにより、Vueインスタンスから、htmlに属性をセットすることができる。

<div id="app">
  <a v-bind:href="url">リンク</a>
</div>

<script>
  new Vue({
  el: '#app',
  data: {
    url: 'https://google.com'
  }
})
</script>

生成されるHTML

<div id="app">
  <a href="https://google.com">リンク</a>
</div>

v-bindは省略して記述できる。(:のみでオッケー）

<div id="app">
  <a :href="url">リンク</a>
</div>

属性を動的に指定する。（[]で指定する）

<div id="app">
  <a :[attr]="url">リンク</a>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    url: 'https://google.com',
    attr:'href'
  }
})
</script>

属性をオブジェクトで設定する。

<div id="app">
  <a v-bind="attrs">リンク</a>
</div>

<script>
  new Vue({
  el: '#app',
  data: {
    attrs:{
      href:'https://google.com',
      id: 10
    }
  }
})

生成されるhtml

<div id="app">
  <a href="https://google.com" id="10">リンク</a>
</div>