[Vue.js]v-bind

v-bindでGoogleへのlinkつくってみる

js
data:{
//htmlに挿入するurlをdataの中に入れておく
  url:'https://www.google.com/?hl=ja'

//これでGoogleへのリンクが貼られる
<a v-bind:href = "url">google</a>

Googleへのリンク以外にもクラスやidなどまとめて表示させたい場合

js
data:
//まとめてgoogleオブジェクトをつくる
    google:{
        href:'https://www.google.com/?hl=ja',
        id:12,
        class:'goo'
    }

html
<a v-bind = 'google'>google</a>

href="https://www.google.com/?hl=ja" id="12" class="goo">google

検証画面で見ると上のようになっている(aタグが本当はある)

ちゃんとhref属性とidとclassがまとめてaタグの中に入ってます