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 におけるマージン: トップ崩壊問題を解決する

推薦する

複合主キーと複数列インデックスに遭遇した場合の MySQL 行ロックの詳細な説明

背景今日、他のプロジェクト チームと協力してシス​​テムのストレス テストを実施しているときに、プロ...

CSS3 で背景ぼかしを実現する 3 つの方法 (要約)

1. 通常の背景ぼかしコード: <スタイル> html, 体 { 幅: 100%; 高...

html ページ!--[IE の場合]...![endif]--使用方法の詳細な紹介

コードをコピーコードは次のとおりです。 <!--[IEの場合]><script t...

ファイルのダウンロードを実現する javascript Blob オブジェクト

目次例示する1. ブロブオブジェクト2. フロントエンド3. バックエンド要約する例示する最近、ファ...

docker createコマンドの使用方法

docker create コマンドは、イメージに基づいてコンテナを作成できます。このコマンドの効果...

docker を使用してコード サーバーをデプロイする方法

画像をプルする # docker pull codercom/code-server # Docke...

MySQL にテーブルデータを挿入するときに中国語の文字化けが発生する問題を解決する方法

1. 問題開発中に、他のデータベースから MySQL データベース テーブルにデータを挿入すると、次...

Vue3 での Teleport の使用に関する詳細な説明

目次テレポートの目的テレポートの仕組みこの記事では、以下の内容を取り上げます。テレポートの目的テレポ...

Vueルーティングナビゲーションガードの簡単な理解

目次1. グローバルガード1. グローバル前線警備2. グローバル解像度ガード3. グローバルポスト...

DockerにNginxをインストールする方法

DockerにNginxをインストールするNginx は、IMAP/POP3/SMTP サービスも提...

select count() と select count(1) の違いと実行方法

Count(*) または Count(1) または Count([column]) は、おそらく S...

Docker nginxのインストールと設定方法

DockerでNginxイメージをダウンロードする docker プル nginx Docker イ...

VUE 応答性原理の詳細な説明

目次1. 応答原理の基盤2. コアオブジェクト: Dep と Watcher 3. 依存関係を収集し...

gbk utf8 GBK と UTF-8 ウェブページエンコーディングを正しく理解して使用する方法

Web ページ エンコーディングは英語では web page encoding と翻訳され、Web ...

Linux での MySQL 8.0.11 のインストールに関するチュートリアル

1. 公式サイトにアクセスしてインストールパッケージをダウンロードしますダウンロードリンク: クリッ...