※「ためスタ」とは、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を普段から使っていれば簡単

特に難しいことはありませんね!
次回は、データのバインディングについて学びたいと思います。

これで、ちょっと成長しましたね。
無理せずちょいちょい頑張りましょう!

このエントリーをはてなブックマークに追加

takahiro

ロマンチック妄想SE

岩手生まれ、埼玉育ち。2人兄弟の長男。ゲームを作りたいと情報系の大学に進学したが、ゲームをやらなくなり。。紆余曲折あってWeb制作会社に就職。プログラマーを経てシステムエンジニアに。現在はシステム案件のディレクションがメイン。プライベートでは勉強含めコーディングはしている。ビールが好き♡

takahiroが書いたオススメ記事

ツール・アプリ

iPhoneでもコーディングしたい!

2017.8.14
ためスタ

Google HomeからLINEは送れるの?

2018.1.6
ためスタ

wordpressで管理しているサイトをhttps化するには?

2018.1.3