Vue補間式とv-textディレクティブの違い

Vue補間式とv-textディレクティブの違い

{{message}}構文はタグコンテンツでのみ使用できます

{{}}この構文は補間式と呼ばれます。補間式には、任意の有効な js 式を記述できます。

1. プラグイン式を使用する

プラグイン式を使用すると、コンテンツがちらつく問題が発生しますが、v-text ではちらつきの問題はありません。

<div id="アプリ">

    <p>

        {{メッセージ}}

    </p>
   <p v-text="メッセージ"></p>

</div>

<script src="./js/vue.js"></script>
<スクリプト>

    vm = new Vue({

        el:"#アプリ",  

        データ:{ 

        メッセージ:"hello vue"

    }

    })

</スクリプト>

上記のコードでは、出力が正常であれば、結果は一貫しています。

ただし、ネットワーク速度が遅い場合は、プラグイン式が先にページに出力されます。

{{メッセージ}}

ページは通常どおりレンダリングされますが、ユーザー エクスペリエンスとしては不十分です。

2. プラグイン式でv-cloakを使用してちらつきの問題を解決する

<スタイル>

    [Vクローク]:



    表示:なし;

}

</スタイル>

<div id="アプリ">

    <p v-マント>

        {{メッセージ}}

    </p>

    <p v-text="メッセージ"></p>

</div>

<script src="./js/vue.js"></script>

v-cloak属性を使用して実行時に非表示にすることができますが、 vue実行の最後にv-cloak属性を自動的に削除します。

この方法はちらつきの問題を解決するために使用できます

3. プラグイン式

プラグイン式はコンテンツを挿入するだけで、元のコンテンツを上書きしませんが、 v-text元のコンテンツを上書きします。

<div id="アプリ">

    <p>

         -  - {{メッセージ}} -  - 

    </p>

    //----こんにちはVue----

    <p v-text="メッセージ">1234556</p>

    // こんにちはビュー

</div>

<script src="./js/vue.js"></script>
<スクリプト>

    vm = new Vue({

        el:"#アプリ",

         データ:{
       メッセージ:"hello vue"
    }
    })

</スクリプト>

これで、vue 補間式と v-text ディレクティブの違いに関するこの記事は終了です。vue 補間式と v-text ディレクティブの違いについての詳細は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue は、データがロードされるときに補間式がちらつく問題をどのように解決しますか?
  • Vue補間式の簡単な紹介Mustache
  • Vue の補間、式、区切り、命令の知識のまとめ
  • Vue の v-if/v-show/補間式によって発生する点滅の原因と解決策
  • Vue 基本構文における補間式の詳細な説明

<<:  MySQLでよく使われる文字列関数トップ10の詳細な説明

>>:  CCS におけるマージン: トップ崩壊問題を解決する

推薦する

Linux で at および cron スケジュールタスクをカスタマイズする方法

Linux システムには 2 種類のスケジュールされたタスクがあります。1 つは 1 回だけ実行され...

Linux で開いているポートへのリモート アクセスを許可する方法

1. ファイアウォール設定ファイルを変更する # vi /etc/sysconfig/iptable...

docker を使用して Django テクノロジー スタック プロジェクトをデプロイする方法

Docker の人気と成熟に伴い、Docker は徐々にプロジェクトをデプロイするための第一の選択肢...

この記事では、Viteがブラウザのリクエストに対して何を行うかを説明します。

目次動作原理:ブラウザは何をするのですか?ホストファイル index.htmlメイン.jsその他のベ...

MySQLバックアップとリカバリの実践に関する詳細な説明

1. mysqlbackup の紹介mysqlbackup は、MySQL Enterprise B...

特定のシンボルで複数の行と列に分割するMySQLの例

一部の障害コード テーブルでは、履歴またはパフォーマンス上の理由から、次の設計パターンが使用されます...

npmとcnpmを混在させる際の落とし穴の詳細な説明

目次原因理由NPM の紹介: CNPM の紹介:より良い方法方法の改善npm と cnpm を一緒に...

CentOS 8.1 で LEMP (Linux+Nginx+MySQL+PHP) 環境を構築する (チュートリアルの詳細)

目次ステップ1: CentOS 8でパッケージを更新するステップ2: CentOS 8にNginx ...

Linux の MySQL 設定の変更が有効にならない問題の解決方法

背景AWS EC2 を使用するプロジェクトサービスがあります。セキュリティとパフォーマンスを考慮して...

タグが新しいページを開くかどうかという問題。主要ウェブサイトの開設状況をまとめました

a タグが新しいページを開くかどうか: (1)百度百科事典:ヘッダーが異なる場合は新しいページが開き...

MySQL 学習ノート: 完全な SELECT ステートメントの使用例と詳細な説明

この記事では、MySQL 学習ノートの select ステートメントの完全な使用方法を例を使用して説...

Vue の img の src 画像アドレスの動的スプライシングの問題について

Vue での img の動的スプライシングを見てみましょう。src 画像アドレス、具体的な内容は次の...

重複したMySQLレコードを現場でチェックし、処理する実践的な記録

目次序文分析するデータ合計繰り返し率どこにあるかと持っているかの違い要約する序文私はソフトウェアの導...

Nginx のインストールと設定ルールの詳細な紹介

目次1. nginxのインストールと操作(Mac OS環境) 2. nginxルールの設定3. コマ...