※「ためスタ」とは、Takahiroが試してみたいと思ったことを、少し時間を確保して、調べながら学習するコーナーです。
よく使うfor/ifの回です
前回の記事、「vue.jsを学ぶ (Hello World! 編の補足)」では、ディレクティブという記法を学びました。
今回は、よく利用するループ処理(for)や条件分岐(if)の使い方を学びたいと思います。
さて、早速やっていきましょう!
サンプルコード
最初に、動作確認用のコードを下記に記載します。
html
<div id="app">
<h1 v-text="title"></h1>
<h2>全てのタスク</h2>
<ul>
<!-- ②v-for="任意の名前 in ループ対象の配列名" -->
<!-- ③任意の名前で、配列の各オブジェクトを操作できる -->
<li v-for="task in tasks">{{ task.task_name }}</li>
</ul>
<h2>全てのタスク(ステータス表示つき)</h2>
<ul>
<li v-for="task in tasks">
<!-- ④v-if="条件式"で、該当するもののみ制御できる -->
<span v-if="task.done === true">[済]</span>
<!-- ⑤複数の条件を設けたい場合は、v-else-if="条件式"で繋ぎましょう -->
<!-- ⑥上記の条件以外の場合の制御をしたい時は、v-elseと書く -->
<span v-else>[未]</span>
{{ task.task_name }}
</li>
</ul>
</div>
javascript
const firstApp = new Vue({
el: '#app',
data: {
title: 'タスク一覧',
// ①配列でタスク5つ準備
// - task_name: タスク名
// - done: タスクが終わっているかどうか
tasks: [
{
task_name: '食器を洗う',
done: true
},
{
task_name: 'お風呂掃除をする',
done: false
},
{
task_name: '晩御飯の買い物に行く',
done: true
},
{
task_name: '夜ご飯を作る',
done: false
},
{
task_name: '子どもをお風呂に入れる',
done: false
}
]
}
});
さて、どうでしょうか。
デモ画面へ
ループ制御: v-for
vueインスタンスがdataで持っている配列やオブジェクトに対して、ループ処理を行うことができます。
今回のサンプルでは、dataにtasksというタスクデータを5つ持っています。それを一覧表示するためにループ処理をしています。
ループ処理は、v-forディレクティブで記述します。
v-for=”[i. 任意の名前] in [ii. data内の配列の名前]”
今回はtasksという配列をdataに持っているのでii.には”tasks”が入ります。
ループ処理は、配列内のデータを1つずつ取り出して処理します。取り出したデータの名前をi.に指定します。
好きな名前で良いです。今回は、1つのタスクということで”task”という名前にしました。
li要素にv-forを書くとこで、配列の数だけループして、タスク名を表示してくれます。
条件分岐: v-if
タスクには、終わったかそうでないか、という状態があるのが一般的ですね。今回の各タスクデータはdoneというキー名でタスクが終わったかどうかをtrue/falseで持っています。
サンプルでは、ステータス表示をタスク名の先頭に付けるリストも書いています。
v-if=”条件式”
条件式は素のjavascriptと同様に記述できます。
複数の条件分岐がある場合は、v-else-if=”条件式”を続けて書きましょう。いままで指定した条件以外の時はv-elseでOKです。
javascriptを普段から使っていれば簡単
特に難しいことはありませんね!
次回は、データのバインディングについて学びたいと思います。
これで、ちょっと成長しましたね。
無理せずちょいちょい頑張りましょう!
人気の記事
最近の記事
Keyword