【Vue.js】条件分岐(v-if, v-else)

Javascript用フレームワーク「Vue.js」で条件分岐(v-if, v-else)する方法をソースコード付きでまとめました。

## 条件分岐(v-if, v-else)

Javascript用フレームワーク「Vue.js」では、条件分岐(v-if, v-else)を使ってDOM操作ができます。

書式

<div v-if="変数名">v-if DOM</div>
<div v-else>v-else DOM</div>

変数値がtrueなら、v-if属性のdivタグが描画されます。
falseなら、v-if属性のdivタグは描画されず、v-ifと並列の位置にあるv-elseがあれば、そちらが描画されます。

今回のソースの例では、

## サンプルコード

サンプルプログラムのソースコードです。

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<!-- Vue.js の読み込み -->
<pre title="https://cdn.jsdelivr.net/npm/vue"></pre>

</head>
<body>

<div id="app">
  <div v-if="show">v-ifが表示</div>
  <div v-else>v-elseが表示</div>
  <button @click="show = !show">ボタン</button>
</div>

<pre title="./js/main.js"></pre>
</body>
</html>

./js/main.js

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

buttonタグのクリックイベントで変数showのdataの「true」「false」を入れ替えます。
これにより、「v-if」「v-else」の描画も入れ替えます。
show = true・・・v-ifが描写される
show = false・・・v-elseが描写される

## 関連ページ

【Vue.js入門】使い方・サンプル集

Vue.jsの使い方を入門者向けにサンプルコード付きでまとめました。

【TypeScript入門】使い方まとめ

TypeScriptの基礎文法、使い方について入門者向けにまとめました。

WEB開発入門速報 |