Rumah > Artikel > hujung hadapan web > Cara mengalih keluar label daripada perkara yang dicetak dalam vue
Cara mengalih keluar label daripada perkara yang dicetak dalam vue
- PHPzasal
- 2023-04-11 15:09:451054semak imbas
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:
<div>{{ message }}</div>
Dalam contoh di atas, Vue akan mengisi nilai "mesej" ke 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:
<div v-html="message"></div>
Dalam contoh di atas, Vue akan secara langsung memaparkan nilai "mesej" ke dalam teg HTML dan memaparkannya dalam teg
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:
<div id="myDiv"><span>Hello</span> world!</div>
<script>
const div = document.querySelector("#myDiv");
console.log(div.innerText); // 输出 "Hello world!"
</script>
Dalam contoh di atas, kami mula-mula mentakrifkan teg
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!