Vue における {{}}、v-text、v-html の違いと用途の詳細な説明

Vue における {{}}、v-text、v-html の違いと用途の詳細な説明
  • { {}} 値を取得すると、タグの元のコンテンツはクリアされません
  • v-textは値を取得し、タグの元の内容をクリアしてプレーンテキストを出力します。
  • v-htmlは値を取得し、タグの元のコンテンツをクリアします。データにhtmlタグが含まれている場合は、解析され、htmlタグとして出力されます。
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
</head>
<本文>
<div id="アプリ">

    <p>おはようございます {{info}}</p>
    <p v-text="info">おはようございます</p>
    <p v-html="info">おはようございます</p>
    <時間>
    <p v-text="addr">はあ</p>
    <p v-html="addr">はあ</p>
    <時間>
    <p v-text="addr2">はあ</p>
    <p v-html="addr2">はあ</p>
</div>

</本文>
</html>
<script src="js/vue.js"></script>
<スクリプト>
    新しいVue({
        el:"#アプリ",
        データ:{
            情報:"良い",
            addr:"<a href='https://www.baidu.com'>クリックして Baidu に入る</a>",
            addr2:'<a href="https://www.baidu.com" rel="external nofollow" >Baidu</a>'
        }
    });
</スクリプト> 

ここに画像の説明を挿入

これで、vue における {{}}、v-text、v-html の違いと用途に関するこの記事は終了です。vue における {{}}、v-text、v-html の違いと用途に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue 命令の詳細な例: v-cloak、v-text、v-html
  • vue で v-text / v-html を使用する詳細なコード例
  • Vue は中括弧 {{}} が v-text と v-html、v-cloak の使用例をフラッシュするのを防ぎます
  • Vue 学習ノート: v-text && v-html && v-bind の詳細な説明
  • Vue ディレクティブ v-html と v-text

<<:  DockerでMySQLマスタースレーブ環境を構築する方法の詳しい説明

>>:  Navicat がデータベース データ構造をインポートする際に発生するエラー datetime(0) の SQL レポートの問題を解決します。

推薦する

アリババの中秋節ロゴとウェブサイトのデザインプロセス

<br />まずアイデアを考え、次にスケッチを描き、次にマウスでスケッチし、最後にフラッ...

MySQL での and or クエリの優先度分析

これは見落とされがちな問題かもしれません。まず、次の点を明確にする必要があります。 MySQL では...

HTML ページジャンプコード

次のコードを index.html などのデフォルトのホームページ ファイルとして保存し、ルート デ...

複数レベルの複雑な動的ヘッダーの avue-crud 実装例

目次序文バックグラウンドデータの結合フロントエンドデータ表示ページ効果表示Avue.js は、既存の...

WebStormはVue3統合APIのソリューションを正しく識別できません

1 問題の説明Vue3 の統合 API は、defineComponent やその他の関数が認識でき...

VueのkeepAliveコンポーネントの機能と使い方の詳細な説明

序文面接中、多くの面接官は「keep-alive が何をするのか知っていますか?」と質問する際に V...

ふるい抽選を実施するミニプログラム

この記事の例では、ふるい抽選を実装するためのミニプログラムの具体的なコードを参考までに共有しています...

docker コマンド例外「権限が拒否されました」の解決方法

Linuxシステムでは、dockerを新しくインストールし、次のようなコマンドを入力します。dock...

Linux で 1 回限りのスケジュールされたタスクを実行するための at コマンドの使用に関する詳細な説明

目次序文1. 一度限りの計画タスクの紹介2. コマンド3. 1回限りのスケジュールタスクを作成する4...

HTML DOM入門_PowerNode Javaアカデミー

DOMとは何ですか? JavaScript を使用すると、HTML ドキュメント全体を再構築できます...

Node.js で Bash スクリプトを書くための究極のソリューション

目次序文zxライブラリ$`コマンド` CD()フェッチ()質問()寝る()スローしない()チョークフ...

Vue 開発者向けの VSCode 拡張機能ベスト 7

適切な VS Code 拡張機能を Visual Studio に追加すると、開発者としての作業がは...

Linux システムを起動時に自動的にスクリプトを実行するように設定する方法の例

序文みなさんこんにちは。私は梁旭です。職場では、システムの起動後にスクリプトやサービスを自動的に開始...

impress.js プレゼンテーション層フレームワーク (デモツール) - 初めての体験

半年もブログを書いていなかったので、少し恥ずかしいです... 正月休みは、Dota をプレイしたり ...

MySQL (5.6 以下) の JSON 解析の詳細な例

MySQL(5.6以下)はjsonを解析します #json 解析関数 DELIMITER $$ `j...