◀ 4.

【Veu.js】ifの条件分岐とtemplateを用いたグループ化

▶
編集

v-ifディレクティブを使用することで条件分岐処理を実行することが出来る。

 

ifの実装例

html

   

v-if="true_data">This is True

   

v-if="false_data">This is False

 

js

var app = new Vue({

  el: '#app',

  data: {

    true_data: true,

    false_data: false,

  }

})

 

出力結果

This is True

 

else if と else の実装

html

 

v-if="false_data">

    if

 

 

v-else-if="true_date">

    else if

 

 

v-else="true_date">

    else

 

 

出力結果

else if

 

templateによるグループ化

ifを付けた要素の子要素が複数ある場合は正しく評価されない。

以下、正しく評価されない実装例

html

<div v-if="true_data">

   

aaa

   

bbb

div>

 

正しく評価するにはtemplateタグを使用する必要がある。

html

<template v-if="true_data">

   

aaa

   

bbb

template>

 

 

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. インストール(ファイルのダウンロード)
  2. npmを使用したプロジェクトの作成
  3. for 繰り返し処理
  4. ifの条件分岐とtemplateを用いたグループ化
  5. クリック時のイベント処理(on:click)
  6. modelとdata フォーム入力値とDOMへの即時反映
  7. computed(算出プロパティ)と使い方とdataとの違い
  8. ライフサイクルフック(created / mounted / updated / destroyedの使い方)
  9. $nextTickの使い方(ライフサイクルフック)
  10. メソッドの定義方法
  11. エラー一覧
  12. ルーティング設定
  13. aリンクの貼り方と動的URLの作成
  14. Mixinを利用した共通処理の記述方法
  15. v-bindによるデータ連携
  16. ヘッダー/フッターの共通コンポーネント
  17. ナビゲーションの現在ページをハイライトする方法
  18. 画面サイズの取得方法
2026-05-15 09:54:19 guest 427

人気ページ

最近更新/作成されたページ