Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Cara mengalih keluar label daripada perkara yang dicetak dalam vue

Cara mengalih keluar label daripada perkara yang dicetak dalam vue

PHPz
Lepaskan: 2023-04-11 15:19:11
asal
1148 orang telah melayarinya

Dalam Vue, kami sering menggunakan {{ }} untuk membentangkan data yang perlu dipaparkan pada halaman. Walau bagaimanapun, apabila kami mencetak data respons dalam Vue, kadangkala beberapa teg HTML muncul dalam teg. Jadi, dalam artikel ini, kami akan menerangkan cara untuk membuang tanda ini.

Pertama sekali, kita perlu tahu sebab teg HTML muncul semasa mencetak data respons dalam Vue. Sebabnya ialah sintaks templat dalam Vue adalah berdasarkan HTML Apabila kami menggunakan {{ }}, Vue secara automatik akan mengisi teg HTML dengan data yang ingin kami paparkan. Contohnya:

1

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

Salin selepas log masuk

Dalam contoh di atas, Vue akan mengisi nilai "mesej" ke dalam teg

Jika nilai "mesej" kami ialah rentetan yang mengandungi beberapa teg HTML, maka teg ini juga akan diisi dalam teg

Untuk menyelesaikan masalah ini, kami boleh menggunakan arahan v-html yang disediakan dalam Vue. Arahan ini membolehkan kami membuat penanda HTML secara langsung dalam Vue. Contohnya:

1

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

Salin selepas log masuk

Dalam contoh di atas, Vue akan secara langsung memaparkan nilai "mesej" ke dalam teg HTML dan memaparkannya dalam teg

Walau bagaimanapun, perlu diingatkan bahawa terdapat beberapa risiko keselamatan apabila menggunakan arahan v-html, kerana ia membolehkan pengguna menyuntik skrip berniat jahat atau tag HTML. Oleh itu, langkah keselamatan mesti diambil apabila menggunakan arahan v-html.

Selain itu, jika kita hanya mahu memaparkan teks biasa dan bukannya penanda HTML, kita boleh menggunakan atribut yang dipanggil innerText. Atribut ini mendapatkan semula kandungan teks biasa unsur dan mengabaikan penanda HTML di dalamnya. Contohnya:

1

2

3

4

5

6

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

 

<script>

  const div = document.querySelector("#myDiv");

  console.log(div.innerText); // 输出 "Hello world!"

</script>

Salin selepas log masuk

Dalam contoh di atas, kami mula-mula mentakrifkan teg

dengan beberapa teg HTML dan menetapkan nilai ID kepadanya. Kemudian, dalam JavaScript, kami menggunakan querySelector untuk mendapatkan teg
dan menggunakan atribut innerText untuk mendapatkan kandungan teks biasanya dan mencetaknya ke konsol.

Ringkasnya, kami boleh mengalih keluar teg HTML sebagai data tindak balas dalam Vue melalui arahan v-html atau atribut innerText. Walau bagaimanapun, beri perhatian kepada keselamatan apabila menggunakan arahan v-html untuk memastikan pengguna tidak dibenarkan menyuntik skrip berniat jahat atau tag HTML.

Atas ialah kandungan terperinci Cara mengalih keluar label daripada perkara yang dicetak dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan