Vueで印刷されたものからラベルを削除する方法-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

Vueで印刷されたものからラベルを削除する方法

PHPz

Apr 11, 2023 pm 03:09 PM

Vue では、ページに表示する必要があるデータを表示するために、{{ }} をよく使用します。ただし、Vue で応答データを出力すると、タグの中に HTML タグが表示されることがあります。そこでこの記事では、これらのマークを削除する方法を説明します。

まず、Vue で応答データを出力するときに HTML タグが表示される理由を知る必要があります。その理由は、Vue のテンプレート構文が HTML に基づいているためです。{{ }} を使用すると、Vue は表示したいデータを HTML タグに自動的に埋め込みます。例:

<div>{{ message }}</div>

ログイン後にコピー

上の例では、Vue は "message" の値を

タグに入力します。「message」値がいくつかの HTML タグを含む文字列である場合、これらのタグは

タグにも入力されます。

この問題を解決するには、Vue で提供されている v-html ディレクティブを使用できます。このディレクティブにより、HTML マークアップを Vue で直接レンダリングできるようになります。例:

<div v-html="message"></div>

ログイン後にコピー

上の例では、Vue は「message」の値を HTML タグに直接レンダリングし、

タグ内に表示します。ただし、v-html ディレクティブを使用すると、ユーザーが悪意のあるスクリプトや HTML タグを挿入できるため、セキュリティ上のリスクがいくつかあることに注意してください。したがって、v-html ディレクティブを使用する場合は、安全対策を講じる必要があります。

また、HTML マークアップではなくプレーンテキストを表示したいだけの場合は、innerText という属性を使用できます。この属性は、要素のプレーンテキストコンテンツを取得し、その要素内の HTML タグを無視します。例:

<div id="myDiv"><span>Hello</span> world!</div>

<script>
  const div = document.querySelector("#myDiv");
  console.log(div.innerText); // 输出 "Hello world!"
</script>

ログイン後にコピー

上の例では、最初にいくつかの HTML タグを含む

タグを定義し、それに ID 値を設定します。次に、JavaScript で、querySelector を使用して

タグを取得し、innerText 属性を使用してそのプレーンテキストコンテンツを取得し、コンソールに出力します。

要約すると、v-html ディレクティブまたは innerText 属性を使用して、Vue の応答データ内の HTML タグを削除できます。ただし、v-html ディレクティブを使用する場合は、ユーザーが悪意のあるスクリプトや HTML タグを挿入できないようにするため、セキュリティに注意してください。

以上がVueで印刷されたものからラベルを削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。