Vue.jsで条件分岐して要素を出し分ける

Vue.jsのv-ifを使って要素を出し分ける方法をメモ。

サンプルコード

JavaScript

var app = new Vue({
	el: '#app',
	data: {
		flag: true
	}
})

HTML

<div id="app">
	<button v-on:click="flag = !flag">show/hide</button>
	<div v-if="flag">true</div>
</div>

ボタンクリック毎にflagを反転して、flagの内容に応じてdivを削除・挿入します。
v-ifのデモページ

v-ifでない場合の出し分けとして、v-elseも用意されています。

HTML

<div id="app">
	<button v-on:click="flag = !flag">show/hide</button>
	<div v-if="flag">true</div>
	<div v-else>false</div>
</div>

v-elseのデモページ

v-ifでない場合にさらに条件分岐したい場合、v-else-ifもあります。

JavaScript

var app = new Vue({
	el: '#app',
	data: {
		counter: 0
	}
})

HTML

<div id="app">
	<button v-on:click="counter++">show/hide</button>
	<div v-if="counter === 0">0</div>
	<div v-else-if="counter <= 3">3以下</div>
	<div v-else>4以上</div>
</div>

v-else-ifのデモページ

v-showはv-ifに近い使い方ができます。

JavaScript

var app = new Vue({
	el: '#app',
	data: {
		flag: true
	}
})

HTML

<div id="app">
	<button v-on:click="flag = !flag">show/hide</button>
	<div v-show="flag">true</div>
</div>

v-ifとの違いは、v-ifが要素を削除・挿入するのに対して、v-showはCSSで表示・非表示を切り替えます。
v-showのデモページ
　

【参考サイト】

• テンプレート構文 — Vue.js
• 条件付きレンダリング — Vue.js