今回はhtmlの構造を制御するディレクティブである、v-if、v-forについて解説していきます。
ifとforはプログラミングの経験がある人ならイメージは付くと思います。
表示非表示の条件分岐と、ループさせるものですね。
v-ifとv-for動的にテンプレートの表示を制御して組み立てるためには、必要不可欠なディレクティブとなります。
v-ifで表示非表示を切り替える
v-ifは真偽（true,false）に応じて表示非表示を切り替えることができます。
チェックボックスによる真偽で表示を切り替えるサンプルを作成しています。
html
<form>
<label>表示/非表示<input type="checkbox" v-model="show"></label>
</form>
<div v-if="show">
<p>チェックありで表示されるコンテンツ</p>
</div>
</div>js
new Vue({
el: '#app',
data: {
show: false
}
})showプロパティがチェックボックスのv-modelに紐付いているので、連動してコンテンツの表示を切り替えることができます。
v-ifと似たディレクティブにv-showというものがあります。
ブラウザのデベロッパーツールをみるとよく分かるのですが、falseの時、文章ツリーから完全に削除するv-ifに対し、v-showはstyle=”display:none;”で非表示にすることができます。
再描画する時の、コストを抑えるためにはv-showを利用すると良いでしょう。
html
<div v-show="show">
<p>チェックありで表示されるコンテンツ</p>
</div>配列の繰り返し処理をするv-for
v-forディレクティブは配列やオブジェクトをループさせて、順番に要素を取り出すことができます。
html
<table>
<tr v-for="b in blogs">
<td>{{ b.title }}</td>
<td>{{ b.date }}</td>
<td>{{ b.content }}</td>
</tr>
</table>js
new Vue({
el: '#app',
data: {
blogs: [{
title: 'タイトル1',
date: '2020-01-01',
content: '内容1'
},
{
title: 'タイトル2',
date: '2020-01-02',
content: '内容2'
},
{
title: 'タイトル3',
date: '2020-01-03',
content: '内容3'
}
]
}
})html
<table>
<tr v-for="b in date_sort">
<th>{{ b.title }}</th>
<td>{{ b.date }}</td>
<td>{{ b.content }}</td>
</tr>
</table>テンプレート要素を使ってループ
templateタグの中にある要素をそのままループさせ出力することができる。
templateはhtmlタグとして出力されず、要素を束ねることだけを目的としたタグです。
v-forを使うためだけに、無駄なdivタグで囲むなんてことはしなくて良くなります。
html
<template v-for="b in blogs">
<h1>{{ b.title }}</h1>
<span>{{ b.date }}</span>
<div>{{ b.content }}</div>
</template>
配列の要素を書き換え
vue.jsでは配列を単純に書き換えただけでは、変更を検知することができません。
ボタンクリックして配列を変更して表示するサンプルを作ってみます。
配列の2を2.1に変更するのですが、このようなコードだと表示が変更されません。
html
<button v-on:click="onclick">クリック</button>
<ul>
<li v-for="num in list">
{{ num }}
</li>
</ul>js
new Vue({
el: '#app',
data: {
list: [1, 2, 3]
},
methods: {
onclick: function() {
this.list[1] = 2.1
console.log(this.list)
}
}
})console.logでの変更は確認できたと思いますが、ブラウザの表示は変わりません。
配列の変更をvue.jsに伝達するためにはvue.setを利用する必要があるのです。
vue.setにつきましては以前ブログで解説しています。
→ URL
vue.setを使って書くとこうなります。
methods: {
onclick: function() {
Vue.set(this.list, 1, 2.1)
console.log(this.list)
}
}もう一つはvue.jsに通知してくれるメソッドを使って配列を変更する方法もあります。
methods: {
onclick: function() {
this.list.splice(1, 1, 2.1)
console.log(this.list)
}
}
vue.jsに通知してくれる主なメソッドはこちら
まとめ
真偽により表示と非表示を切り替えるv-if
配列やオブジェクトをループさせて要素を取り出すv-for
どちらも表示を動的に変更するフロントエンド開発の重要な部分となっています。
コメント