【Vue.js】 IF文・For文　条件分岐、繰り返し処理 #Mac

【ゴール】

VueJSでの IF文・For文　条件分岐、繰り返し処理

【環境】

mac catarina 10.156
Vue.js v2.6.12

【実装】

①適当にワークスペース作成
②Vue.jsインストール or 埋め込み(重要)

If文　

■「v-if」 / 「v-else」　を使用

index.html

<div id="app">
  <p v-if="ok">OK</p>
  <p v-else>Not OK</p>
</div>
.
.
.
.
<script>
 new Vue ( {
   el: '#app',
   data: {
     ok: true  //ここが、true：OK表示、false: NotOKが表示される
   }
 })
</script>

For文

■「v-for」使用

index.html

<div id="app">
  <ul>
    <li v-for="name in names">{{name}}</li>
  </ul>
</div>
.
.
.
.
<script>
 new Vue ( {
   el: '#app',
   data: {
     names: ['tarou', 'hanako', 'misaki']
   }
 })
</script>

結果

【まとめ】

■基本天気な挙動を理解している方だとすぐに理解できる

■If文は「true」「false」を上手く使い分ける

■for文は記述の省略につながるので覚えていて損なし

【オススメ記事】

■ 【node.js】ルーティング設定ホーム画面表示させる。
https://qiita.com/tanaka-yu3/items/1c8859e16070e67d73c0

■ 【Node.js mysql】mysql接続　データを取り出す
https://qiita.com/tanaka-yu3/items/6b007dd96618bb6c844e

■ 【javascript】　テンプレートリテラルとは　一言で。
https://qiita.com/tanaka-yu3/items/9b07bd9fc4126291be28

【Vue.js】 IF文・For文 条件分岐、繰り返し処理