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 レポートの問題を解決します。

推薦する

Webリクエストと処理のTomcatソースコード分析

目次序文1. エンドポイント2. 接続ハンドラ3. コヨーテ4. コンテナ責任チェーンパターン序文T...

Vueはログイン時に画像認証コードを実装します

この記事では、Vueログイン用画像認証コードの具体的なコードを例として紹介します。具体的な内容は以下...

mysql 5.7.11 winx64.zip インストールと設定方法のグラフィックチュートリアル

MySql データベース システムをインストールして構成します。 1. ダウンロード http://...

MySQL マルチテーブルクエリ例の詳しい解説 [リンククエリ、サブクエリなど]

この記事では、例を挙げて MySQL のマルチテーブル クエリについて説明します。ご参考までに、詳細...

WeChatアプレットが弾丸画面を送信するビデオプレーヤーを実装

この記事では、WeChatアプレットでビデオプレーヤーの集中砲火を実装するための具体的なコードを参考...

純粋な CSS で実装された 3 つの通知バーのスクロール効果

序文通知バー コンポーネントは、比較的一般的なコンポーネントです。基本的に、すべてのサイトにこのよう...

JavaScript の 7 つのデータ型の詳細な説明

目次序文:詳しい紹介:練習する:要約する序文: Python、Java、Cシリーズなど、すべての主要...

Vue で video.js を使用して m3u8 形式のビデオを再生する方法

目次1. インストール2. videojsの紹介3. コンポーネントでのテストと使用1. 基本的な自...

Web デザインの経験: 独善的な Web デザイナー

1. ゴミかクラシックか? Web テクノロジーは急速に更新されており、Web サイトのインターフェ...

Linux でユーザーにルート権限を追加する方法の概要

1. ユーザーを追加します。まず、adduser コマンドを使用して共通ユーザーを追加します。コマン...

FileZilla 425 FTP に接続できない (Alibaba クラウド サーバー) の解決策

Alibaba Cloud ServerがFTPに接続できないFileZilla 425 データ接続...

Vue.js ディレクティブのカスタム命令の詳細な説明

デモコマンドをカスタマイズするVue カスタム ディレクティブの構文は次のとおりです。 Vue.di...

Windows 8.1 で MySQL5.7 のルート パスワードを忘れた場合の解決方法

【背景】最近勉強中に非常に恥ずかしいことに遭遇しました。MySQL のパスワードを忘れてしまい、My...

CSSの2つの特別な値は、カスケードの継承と初期メソッドを制御するために使用されます。

カスケードを制御するために CSS の任意のプロパティに割り当てることができる特別な値が 2 つあり...

面接でよく聞かれる Vue 修飾子 13 個

目次1. 怠惰な2.トリム3.番号4.停止5. キャプチャ6.自分7.一度8.予防する9.ネイティブ...