Cara menggunakan v-html dalam vue

Arahan v-html dalam Vue.js digunakan untuk: Memasukkan kod HTML mentah, bebas daripada pengkompil Vue. Gunakan sintaks:

, dengan htmlCode ialah pembolehubah atau ungkapan yang mengandungi kod HTML. Contoh:

Hello, World!

Nota: v-html akan menimpa elemen

Penggunaan v-html dalam Vue

Arahan v-html dalam Vue.js membolehkan anda memasukkan kod HTML ke dalam templat anda secara dinamik. Ia digunakan untuk memasukkan kandungan HTML mentah yang tidak terjejas oleh pengkompil Vue. 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

Cara menggunakan 🎜🎜🎜 Arahan v-html memerlukan pembolehubah atau ungkapan sebagai parameter, yang mengandungi kod HTML untuk dimasukkan. Sintaksnya adalah seperti berikut: 🎜rrreee🎜Di mana, htmlCode ialah pembolehubah atau ungkapan yang mengandungi kod HTML. 🎜🎜🎜Contoh🎜🎜rrreee🎜🎜Nota: 🎜🎜

• v-html akan menimpa kandungan unsur yang sedia ada, jadi gunakannya dengan berhati-hati. 🎜
• Memandangkan v-html memasukkan HTML secara langsung, pastikan anda mempercayai perkara yang anda masukkan untuk mengelakkan isu keselamatan. 🎜
• Arahan v-html tidak menyusun arahan atau ungkapan pengkompil Vue, jadi sila jangan gunakannya dalam HTML yang disisipkan. 🎜
• Jika anda perlu memasukkan kandungan dinamik yang dipengaruhi oleh pengkompil Vue, pertimbangkan untuk menggunakan v-bind:innerHTML sebaliknya. 🎜🎜

Atas ialah kandungan terperinci Cara menggunakan v-html dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!