vueでv-htmlを使う方法

Vue.js の v-html ディレクティブは、次の目的で使用されます。 Vue コンパイラから独立して、生の HTML コードを挿入します。構文:

を使用します。htmlCode は、HTML コードを含む変数または式です。例:

Hello, World!

注: v-html は要素を上書きします

##Vue での v-html の使用

#Vue.js での v-htmlディレクティブを使用すると、HTML コードをテンプレートに動的に挿入できます。 Vue コンパイラの影響を受けない生の HTML コンテンツを挿入するために使用されます。

使用方法

v-html ディレクティブでは、挿入する HTML コードを含む変数または式をパラメータとして指定する必要があります。構文は次のとおりです。

<code class="html"><p v-html="htmlCode"></p></code>

htmlCode は、HTML コードを含む変数または式です。

例

<code class="html"><script>
import { ref } from 'vue';

export default {
  setup() {
    const html = ref('<p><h1>Hello, World!</h1></p>');

    return { html };
  },
};
</script>

<template>
  <div v-html="html"></div>
</template></code>

注:

• v-html は要素を上書きします既存のコンテンツですので、ご利用の際はご注意ください。
• v-html は HTML に直接挿入されるため、セキュリティの問題を避けるために、挿入するコンテンツが信頼できることを確認してください。
• v-html ディレクティブは Vue コンパイラ ディレクティブや式をコンパイルしないため、挿入された HTML では使用しないでください。
Vue コンパイラの影響を受ける動的コンテンツを挿入する必要がある場合は、代わりに
• v-bind:innerHTML の使用を検討してください。

以上がvueでv-htmlを使う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。