Vue.js辞典

v-if,v-else-if,v-elseを使って条件分岐しよう

Vue.jsで条件分岐する方法

このページをあとで読む

Vue.jsの「v-if」を要素に指定すると、条件分岐させることができます。

trueで表示、falseで非表示です。感覚的にできていいですね。表示・非表示の際にCSSで効果をつけてもいいですね。

条件分岐で表示・非表示

サンプルコード

id「app」が指定されているdiv要素内のp要素を表示しています。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
 <p v-if="display">display text</p>
</div>
<script>
 var app = new Vue({
  el: '#app',
  data: {
   display: true
  }
 })
</script>
</body>
</html>

非表示にする方法

上のコード内の以下の部分を「display: false」に変更すると、要素が非表示になります。

 var app = new Vue({
  el: '#app',
  data: {
   display: false
  }
 })

表示・非表示を切り替える

Google Chromeのデベロッパーツールを開いてコンソールに「app.display = false」と入力すると非表示、「app.display = true」と入力すると表示します。

上記のようなコンソールでの操作は、イベントリスナー「DOMContentLoaded」やイベントハンドラ「window.onload」を使って読み込むと動作しませんでした。何かやり方があるのかな・・・わかり次第追記します。

v-ifとv-elseを使って表示を出し分ける

次は「v-if」と「v-else」を使って表示を出し分けます。

サンプルコード

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
 <p v-if="display">A</p>
 <p v-else>B</p>
</div>
<script>
 var app = new Vue({
  el: '#app',
  data: {
   display: true
  }
 })
</script>
</body>
</html>

上記のコードを実行すると「A」と表示されます。

以下のように「display: false」を指定すると「B」と表示されます。

 var app = new Vue({
  el: '#app',
  data: {
   display: false
  }
 })

コンソールで「app.display = false」または「app.display = true」と入力して、表示結果を試すとわかりやすいです。

複数の条件を指定する

「『0』か『1』か」のような2つの条件分岐だけではなく、もっと複数の条件を指定したい場合もあります。「v-if」「v-else-if」「v-else」を組み合わせるとできます。

以下のコードは、条件によって「A」「B」「C」「Not A/B/C」と表示します。

サンプルコード

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
 <p v-if="type === 'A'">A</p>
 <p v-else-if="type === 'B'">B</p>
 <p v-else-if="type === 'C'">C</p>
 <p v-else>Not A/B/C</p>
</div>
<script>
 var app = new Vue({
  el: '#app',
  data: {
   type: 'B'
  }
 })
</script>
</body>
</html>

上記のコードを実行すると「B」と表示されます。

以下のように「type: ‘A’」を指定すると「A」と表示されます。

 var app = new Vue({
  el: '#app',
  data: {
   type: 'A'
  }
 })

コンソールで表示する内容を変えてみましょう。

  • app.type = ‘A’
  • app.type = ‘B’
  • app.type = ‘C’
  • app.type = ‘123’ など(A,B,C以外の文字列や数字を入れてみよう)

上記を入力して、表示結果を試すとわかりやすいです。

参考リンク

以下の公式ドキュメントには、このページで紹介した方法以外のやり方や、v-ifとv-show、v-ifとv-forについても書いてあります。

条件付きレンダリング – Vue.js

著者:bouya Imamura

最近追加しました

Vue.js辞典 TOP