v-bind 省略記法
v-bindディレクティブは頻繁に使用するため、省略記法が用意されています。
「v-bind」の部分は省略して、「:」だけでも書くことができます。
構文
通常の書き方
<a v-bind:href="url">Link</a>
省略記法
<a :href="url">Link</a>
例
index.html
<div id="app">
<p>
<a v-bind:href='url'>Link</a>
</p>
<p>
<a :href='url'>省略記法Linl</a>
</p>
</div>
index.js
var app = new Vue({
el: '#app',
data: {
url: 'http://railsgirls.com/tokyo.html'
}
})
ブラウザ
検証ツール