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

##【ゴール】
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