データバインディングの基本については以前にブログ記事で解説をしました。
→ https://liberty-dock.com/business_post/53184/
しかし、データバインディングというのは奥が深いです。
今回はデータバインディングの応用編について解説していきます。
複数の属性をまとめてバインディング
v-bindではdataオブジェクトのプロパティを「属性名 : 値」のオブジェクト形式にすれば、複数の属性をまとめてバインディングすることが可能です。
html
<div id="app">
<form>
<input v-bind="attr">
</form>
</div>js
new Vue({
el: '#app',
data: {
attr: {
type: 'text',
value: '初期値',
placeholder: 'プレースホルダー'
},
},
})これで、inputタグの3つの属性をバインディングできます。
- type属性
- value属性
- placeholder属性
required属性やdisabled属性のように値を持たない場合は、true,falseで設定できます。
プロパティも設定可能
要素オブジェクトのプロパティを設定することもできます。
- textContentプロパティ
- innerHtmlプロパティ
なるべく要素オブジェクトのプロパティの指定はしない方がわかりやすいので、こういう設定もできるという参考程度に見ておいてください。
html
<div id="app">
<div v-bind:text-content.prop="text"></div>
<div v-bind:inner-html.prop="html"></div>
</div>js
new Vue({
el: '#app',
data: {
text: 'テキスト',
html: '<a href="#">リンク</a>',
},
})テキストをバインディングするtextContentとhtmlタグをバインディングするinnerHtmlです。
プロパティ名の指定は従来のキャメルケース（textContent）ではなく、ケバブケース（text-content）で記述します。
javascript式で動的に属性
javascriptの式を使い動的にフォームの要素を変更してみます。
textareaタグのcolsとrowsを操作するサンプルです。
html
<div id="app">
<form>
<label><input type="radio" v-model="attr" value="cols">cols</label><br>
<label><input type="radio" v-model="attr" value="rows">rows</label><br>
<input type="text" v-model="size"><br>
<textarea v-bind:[attr]=size></textarea>
</form>
</div>js
new Vue({
el: '#app',
data: {
attr: 'cols',
size: 1,
},
})
属性名はブラケッド（[…]）で囲えば動的に変更が可能です。
ラジオボタンでcolsかrowsを選択し、どちらかのサイズを動的に変更できるようにしています。
1度だけバインドさせる
v-onceディレクティブを使うと、一度だけ描画することが可能です。
html
<div id="app">
<input type="text" v-model="name">
<p>{{ name }}</p>
<p v-once>{{ name }}</p>
</div>js
new Vue({
el: '#app',
data: {
name: '最初のテキスト',
},
})v-onceが付いているdivの方は変化しませんね。
style属性のデータバインディング
style属性もバインディングすることができます。
直接htmlタグに埋め込む方法と、dataオブジェクトを使って設定する方法があります。
html
<div id="app">
<div v-bind:style="{ fontSize: '20px', color: '#F00' }">テキスト</div>
<div v-bind:style="[color, size]">テキスト</div>
</div>js
new Vue({
el: '#app',
data: {
color: {
backgroundColor: '#000',
color: '#FF0'
},
size: {
fontSize: '20px'
},
},
})classを設定したい場合は、v-bind:classで設定することが可能です。
チラツキ
{{…}}ではバインドという性質上、タイムラグで{{…}}が描画されてしまいます。
一瞬ではありますがコードがエンドユーザーに表示されてしまうのは良くないですよね。
そこで、このチラツキを表示させないようにするのが、v-cloakディレクティブです。
html
<div id="app">
<div v-cloak>{{ msg1 }}</div>
<div>{{ msg2 }}</div>
</div>js
new Vue({
msg1: 'ちらつきなしテキスト',
msg2: 'ちらつきありテキスト'
},
})css
[v-cloak] {
display: none;
}v-clock属性が付いている要素を非表示にし、vue.jsが初期化タイミングでv-clockを破棄します。
その結果チラツキを防ぐことができるようになるのです。
コメント