Vue 条件付きレンダリング v-if と v-show

Vue 条件付きレンダリング v-if と v-show

1. 動詞-if

テンプレートでは、条件に応じてレンダリングできます。条件は、 v-ifv-else-ifv-elseを組み合わせて実装されます。

サンプルコードは次のとおりです。

<div id="アプリ">
    <p v-if="weather == 'sun'">今日は公園に行きましょう! </p>
    <p v-else-if="weather == 'rain'">今日は映画を見に行きましょう! </p>
    <p v-else>今日はどこにも行きません! </p>
</div>
<スクリプト>
    vm = new Vue({
        el: "#app",
        データ: {
            天気: '太陽'
        }
    });
</スクリプト>
 

2. <template> で v-if を使用する

場合によっては、1 つの条件で複数のhtml要素をロードする必要があります。その場合は、 template要素で実行できます。

サンプルコードは次のとおりです。

<div id="アプリ">
    <テンプレート v-if="年齢<18">
        <p>数学は何点ですか? </p>
        <p>英語の点数はいくつですか? </p>
    </テンプレート>
    <テンプレート v-else-if="年齢>=18 && 年齢<25">
        <p>あなたは結婚していますか? </p>
        <p>大学院入試は受けましたか? </p>
    </テンプレート>
    <テンプレート v-else>
        <p>給料は上がりましたか? </p>
        <p>給料はいくらですか? </p>
    </テンプレート>
</div>
<スクリプト>
    vm = new Vue({
        el: "#app",
        データ: {
            年齢: 24
        }
    });
</スクリプト>
 

3. キーを使用して再利用可能な要素を管理する

さらに、テンプレートでは、 Vue再レンダリングするのではなく既存の要素を再利用しようとするため、より効率的になります。

ユーザーがさまざまなログイン方法を切り替えることができるようにする場合:

<div id="アプリ">
  <テンプレート v-if="ログインタイプ === 'ユーザー名'">
    <label for="username">ユーザー名:</label>
    <input type="text" id="ユーザー名" name="ユーザー名" placeholder="ユーザー名">
  </テンプレート>
  <テンプレート v-else>
    <label for="email">メール</label>
    <input type="text" id="email" name="email" placeholder="メールアドレス">
  </テンプレート>
  <div>
    <button @click="changeLoginType">ログインタイプを切り替える</button>
  </div>
</div>
<スクリプト>
  constアプリ = 新しいVue({
    el: "#app",
    データ: {
      ログインタイプ: "ユーザー名"
    },
    メソッド: {
      ログインタイプを変更する(){
        // タイプがユーザー名の場合はメールに切り替え、それ以外の場合は this.loginType = this.loginType==="username"?"email":"username";
      }
    }
  })
</スクリプト>

次に、効果図を見てみましょう。

ここで問題が発生します。 username入力ボックスに情報を入力してメールボックスに切り替えると、以前の情報が保持されます。これは明らかに要件に沿っていません。切り替えるたびにhtml要素を再レンダリングする場合は、再レンダリングする必要がある要素に一意のkey属性を追加できます。 key属性には整数または文字列型を使用することをお勧めします。

サンプルコードは次のとおりです。

<div id="アプリ">
  <テンプレート v-if="ログインタイプ === 'ユーザー名'">
    <label for="username">ユーザー名:</label>
    <input type="text" id="ユーザー名" name="ユーザー名" placeholder="ユーザー名" key="ユーザー名">
  </テンプレート>
  <テンプレート v-else>
    <label for="email">メール</label>
    <input type="text" id="email" name="email" placeholder="Email" key="email">
  </テンプレート>
  <div>
    <button @click="changeLoginType">ログインタイプを切り替える</button>
  </div>
</div>

ユーザー名123メール モードに切り替えると、入力ボックスの123消えることがわかります。

注: <label> 要素にはキー属性が追加されていないため、引き続き効果的に再利用できます。

4. Vショー

条件付きで要素を表示するための別のオプションはv-showディレクティブです。使い方はほぼ同じです:

<h1 v-show="ok">こんにちは!</h1>


違いは、 v-showを持つ要素は常にレンダリングされ、 DOM内に残ることです。 v-show 、要素のCSS property displayを切り替えるだけです。

注意: v-show は <template> 要素をサポートしておらず、v-else もサポートしていません。

4.1 v-if と v-show

v-ifは「true」の条件付きレンダリングであり、条件ブロック内のイベント リスナーと子コンポーネントが切り替え中に適切に破棄され、再構築されることを保証します。

v-ifも遅延です。最初のレンダリングで条件が false の場合、何も行われません。条件ブロックは、条件が初めて true になるまでレンダリングされません。

それに比べて、 v-showはるかに単純です。要素は初期条件に関係なく常にレンダリングされ、 CSSに基づいて単純に切り替えられます。

一般的に、 v-ifは切り替えコストが高く、 v-showは初期レンダリング コストが高くなります。したがって、非常に頻繁に切り替える必要がある場合はv-showを使用する方が適切であり、実行時に条件がほとんど変化しない場合はv-if使用する方が適切です。

これで、vue 条件付きレンダリング v-if と v-show に関するこの記事は終了です。vue 条件付きレンダリングに関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue の条件付きレンダリングとリストレンダリングの詳細な理解
  • Vue.js の条件付きレンダリング命令の簡単な分析
  • Vue 基本チュートリアル: 条件付きレンダリングとリストレンダリング
  • Vueのリストレンダリングの詳細な説明
  • vue の v-for ディレクティブはリストのレンダリングを完了します
  • Vue リストのレンダリング、並べ替え、フィルタリングの詳細な説明
  • Vue 条件付きレンダリングとリストレンダリング

<<:  Nginx が Apache より優れている理由

>>:  DIV+CSS命名規則の詳細な説明はSEO最適化に役立ちます

推薦する

VMware Workstation 15 Pro に Ubuntu 1804 をインストールするチュートリアル (画像とテキスト付き)

このメモはインストール チュートリアルです。実用的な意味はありません。記録のためだけに書いています。...

Hyper-V の紹介とインストールと使用 (詳細な図解)

はじめに:IT 業界の巨人である Microsoft 独自の仮想化技術は、VMware や Citr...

Linuxで環境変数を削除する詳細な手順

Linuxで環境変数を削除するには?unsetコマンドを使用してすぐに削除します1. Linuxクラ...

HTMLの基礎 HTMLの構造

HTML ファイルとは何ですか? HTML は Hyper Text Markup Language...

nginx を使用したプロキシ サーバーの設定

Nginx は、リバース プロキシ機能を使用して負荷分散を実装できるほか、フォワード プロキシ機能を...

MySQLはconnect_by_isleaf MySQLメソッドまたはストアドプロシージャに似た機能を実装します

最近、特に異常なビジネス需要があり、テーブルがあります テーブル「デモ」を作成します( `id` i...

Linux でアップロードされたファイルのスケジュールされたバックアップと増分バックアップを実装する方法

導入Alibaba Cloud のような OSS ストレージ サービスを使用している場合は、サービス...

React NativeのScrollViewプルダウンリフレッシュ効果

この記事では、React Native ScrollViewのプルダウンリフレッシュ効果の具体的なコ...

HTML スクロールバーのテキストエリア属性の設定

1.オーバーフローコンテンツのオーバーフロー設定(設定されたオブジェクトにスクロールバーを表示するか...

MySQL 5.7.17 winx64 のインストールと設定方法のグラフィックチュートリアル

Windows インストール mysql-5.7.17-winx64.zip メソッド レコード &...

Linux での fuser コマンドの使用法の詳細な説明

説明する: fuser は、現在ディスク上のファイル、マウント ポイント、さらにはネットワーク ポー...

Ubuntu 16.04.4LTS に mininet をインストールする際に発生する問題と解決策

ミニネットMininet は軽量のソフトウェア定義ネットワークおよびテスト プラットフォームです。軽...

mysql5.6.zip形式の圧縮版インストールグラフィックチュートリアル

はじめに: MySQL は、スウェーデンの MySQL AB によって開発されたリレーショナル デー...

JavaScript セレクター関数 querySelector および querySelectorAll

目次1. querySelectorは単一の要素を照会する1. ドキュメントインスタンスの呼び出し2...

HTML における li タグの水平配置の例

ほとんどのナビゲーション バーは、下の図に示すように水平に配置されていますが、これはどのように実現さ...