条件付きレンダリング
表示・
よくあるケースとしては,
var vm = new Vue({
el: '#example',
data: {
name: '',
},
computed: {
isValid: function () {
return this.name.length > 0;
}
}
});
window.vm = vm;
<div id="example">
<p>名前 {{ name }}</p>
<p v-show="!isValid">
名前を入力してください
</p>
</div>
後ほどUIから入力を受けつける方法を紹介しますが,
エラーメッセージが表示されなくなることを確認できます。
vm.name = 'John';
v-if, v-showいずれも式の結果に応じて,
v-ifは式の結果に応じてDOM要素を追加・
一方,
条件付きレンダリングのサンプルコードは,
クラスとスタイルのバインディング
アプリケーションを開発していて,
v-bind:classディレクティブは,
また,
<div id="example" v-bind:class="{'error': !isValid}">
<p>名前 {{ name }}</p>
<p v-show="!isValid">
名前を入力してください
</p>
</div>
v-bind:styleディレクティブでは,
<div id="example" v-bind:style="{'border': (isValid ? '' : '1px solid red')}">
<p>名前 {{ name }}</p>
<p v-show="!isValid">
名前を入力してください
</p>
</div>
v-if, v-showと同様にConsoleタブで,
メソッドとイベントハンドリング
v-onディレクティブを利用することで,
これまでの例を改良して,
<p>
<input type="text" v-on:input="name = $event.target.value">
</p>
v-onディレクティブの後ろにはイベント名が続きます。上の例はinputイベントをハンドリングして,
<input type="text" v-on:change="name = $event.target.value">
属性値は,
Mustache記法の場合と同様に,
var vm = new Vue({
// ...
methods: {
updateName: function(event) {
this.name = event.target.value;
}
}
// ...
});
<input type="text" v-on:input="updateName($event)">
もうひとつ,
<p v-show="isValid">
<button v-on:click="sendData">送信</button>
</p>
また,
var vm = new Vue({
// ...
methods: {
updateName: function(event) {
this.name = event.target.value;
},
sendData: function() {
alert(this.name);
}
}
// ...
});
ボタンをクリックすることで,
フォーム入力バインディング
先の例では,
先ほどの例を,
<input v-model="name">
どうでしょう。v-on:inputと同じ動きが実現できています。もしinputイベントではなくchangeイベントと同様の動きを実現する場合には,
<input v-model.lazy="name">
今回は紹介できませんでしたが,
フォーム入力バインディングのサンプルコードは,
まとめ
いかがでしたか。DOM APIやjQueryを利用するよりも,
次回は,