Bagaimana untuk memasukkan html dalam vue

Dalam Vue, anda boleh menggunakan arahan v-html untuk memasukkan kod HTML ke dalam elemen DOM.

Format sintaks arahan v-html ialah: "v-html = 'HTML code'". Dalam arahan ini, kod HTML ialah ungkapan, yang boleh menjadi atribut data bagi contoh Vue atau atribut yang dikira.

Arahan v-html mempunyai banyak senario penggunaan Contohnya, apabila kita perlu memaparkan beberapa kandungan secara dinamik, kita boleh menggunakan arahan v-html.

Berikut ialah contoh yang menunjukkan cara menggunakan arahan v-html dalam Vue:

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

<script>
export default {
  data() {
    return {
      content: '<h1>Hello world</h1>',
    }
  },
}
</script>

Dalam contoh ini, kami mentakrifkan komponen Vue yang menggunakan arahan v-html untuk menukar kandungan Kod HTML dalam atribut data dimasukkan ke dalam elemen div. Nilai atribut kandungan yang ditakrifkan dalam data ialah "4a249f0d628e2318394fd9b75b4636b1Hello world473f0a7621bec819994bb5020d29372a".

Apabila kami menjalankan komponen ini, tajuk "Hello world" akan dipaparkan pada halaman. Inilah yang dicapai oleh arahan v-html.

Perlu diambil perhatian bahawa oleh kerana arahan v-html akan memasukkan kod HTML terus ke dalam elemen DOM, anda perlu memastikan bahawa kod HTML adalah selamat. Jika kod HTML datang daripada input pengguna, beberapa penapis tersuai harus digunakan untuk menapis kod HTML untuk mengelakkan serangan skrip merentas tapak (XSS).

Ringkasnya, v-html ialah arahan yang sangat praktikal dalam Vue, yang boleh membantu kami memaparkan kandungan halaman dengan lebih mudah. Walau bagaimanapun, anda perlu memberi perhatian kepada isu keselamatan untuk mengelakkan serangan XSS.

Atas ialah kandungan terperinci Bagaimana untuk memasukkan html dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!