Vue.jsの条件分岐とループ

条件判定

v-if

条件判定では、v-ifディレクティブを使用します。

v-ifディレクティブ

要素とテンプレート(template)でv-ifディレクティブを使用します。

<div id="app">
    <p v-if="seen">Hi,dude.</p>
    <template v-if="ok">
      <h1>Florian Studio</h1>
      <p>Tech Power!</p>
      <p>ceodata.com！！！</p>
    </template>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    seen: true,
    ok: true
  }
})
</script>

v-ifディレクティブは、表現式の値（trueまたはfalse）に従ってp要素を挿入するかどうかを決定します。

ハンドルバー(Handlebars)などの文字列テンプレートでは、次のような条件付きブロックを作成する必要があります。

<!-- Handlebars テンプレート -->
{{#if ok}}
  <h1>Yes</h1>
{{/if}}

v-else

v-elseディレクティブを使用して、“else block”(elseブロック)をv-ifに追加できます。

v-elseディレクティブ

ランダムに数値を生成し、それが0.5より大きいかどうかを判定してから、対応する情報を出力します。

<div id="app">
	<div v-if="Math.random() > 0.5">
	  Sorry
	</div>
	<div v-else>
	  Not sorry
	</div>
</div>
<script>
new Vue({
  el: '#app'
})
</script>

v-else-if

v-else-ifは2.1.0で追加され、v-ifのelse-ifブロックとして使用されます。 チェーン内で複数回使用できます。

v-elseディレクティブ

type型変数の値を判定します。

<div id="app">
    <div v-if="type === 'A'">
      A
	</div>
	<div v-else-if="type === 'B'">
	  B
	</div>
	<div v-else-if="type === 'C'">
	  C
	</div>
	<div v-else>
	  Not A/B/C
	</div>
</div>	
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>

v-else、v-else-ifは、v-ifまたはv-else-ifの後に接続する必要があります。

v-show

v-showディレクティブを使用して、条件に基づいて要素を表示できます。

v-show ディレクティブ

<h1 v-show="ok">Hello!</h1>