Vue.jsでHTML属性に値を使用する

Vue.jsでHTML属性に値を入れようとして少し迷ったのでメモ。

サンプルコード

personsというデータを用意して、ループで処理してみます。

JavaScript

var app = new Vue({
	el: '#list',
	data: {
		persons: [
			{
				id: 'akira',
				name: '大野 晶',
			}, {
				id: 'koharu',
				name: '日高 小春',
			}
		]
	}
})

通常のテキストであれば{{ }}を使ったMustache構文で記述するので、属性も同様にしていました。

HTML

<div id="list">
	<ol>
		<li v-for="person in persons" id="{{ person.id }}">
		{{ person.name }}
		</li>
	</ol>
</div>

li内のテキストはきちんと出力されますが、idは出力されず、{{ person.id }}がそのままになっていました。
うまくいかなかった場合のデモページ

Mustache構文はHTML属性内では使えないので、代わりにv-bindディレクティブを使うようです。

HTML

<div id="list">
	<ol>
		<li v-for="person in persons" v-bind:id="person.id">
		{{ person.name }}
		</li>
	</ol>
</div>

idが意図した形で出力されました。
idを出力するデモページ

hrefなどの場合も同様で、以下のようになります。

HTML

<div id="list">
	<ol>
		<li v-for="person in persons">
			<a v-bind:href="person.id + '.html'">
			{{ person.name }}
			</a>
		</li>
	</ol>
</div>

hrefを出力するデモページ

ちなみに、v-bindは以下のように省略して記述できます。

HTML

<div id="list">
	<ol>
		<li v-for="person in persons" :id="person.id">
			<a :href="person.id + '.html'">
			{{ person.name }}
			</a>
		</li>
	</ol>
</div>

v-bindを省略するデモページ
　

【参考サイト】

• テンプレート構文 — Vue.js