Vue.js HTML属性に値をバインドする

v-bind:要素名 要素名に対して値をバインドする

var app1 = new Vue({
  el: '#app1',
  data: {
    yahooURL:"http://yahoo.co.jp/"
  }
})

<h2><a v-bind:href="yahooURL">yahooへ</a></h2>
<h2><a :href="yahooURL">v-vindを省略したこの記述も等価</a></h2>

v-bindで複数の要素をバインドする

const imageURL = "https://assets.media-platform.com/gizmodo/dist/images/2015/09/150902ngooglenewlogo-w1280.jpg";
var app1 = new Vue({
  el: '#app1',
  data: {
    imageAttributes:{
      src: imageURL,
      height: 100
    }
  },
  methods: {
    changeSize: function(){
      this.imageAttributes.height += 30;
    }
  }
});

<h2><img v-bind="imageAttributes" /><button name="chnge" v-on:click="changeSize()">サイズを変更</button></h2>

サンプルコード

Vue-Samples/htmlbind.html at master · letitride/Vue-Samples · GitHub

リンク