vue nbsp spaces tidak berfungsi

<p>Dalam Vue, kadangkala kami menggunakan <code> </code> untuk menggantikan ruang, tetapi mendapati <code> </code> tidak berfungsi dan ruang masih muncul. kenapa ni? Dalam artikel ini, kami akan meneroka isu ini dan menyediakan cara untuk menyelesaikannya. </p> <p>Pertama sekali, kita perlu memahami perbezaan antara <code> </code> dan ruang. <code> </code> ialah watak entiti HTML yang mewakili ruang tidak putus, iaitu pemisah baris dan sempang perkataan tidak dibenarkan pada kedudukan ini. Ruang biasa boleh dipecahkan secara automatik apabila pemisah baris atau pemecahan perenggan diperlukan, jadi <code> </code> biasanya digunakan untuk menyediakan jurang ruang pada kedudukan yang tidak dibenarkan pecah. </p> <p>Dalam Vue, kami boleh menggunakan arahan <code>v-html</code> untuk memaparkan rentetan HTML ke halaman secara dinamik. Sebagai contoh, kita boleh menulis seperti ini: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><template> <div v-html="htmlStr"></div> </template> <script> export default { data() { return { htmlStr: 'hello world' } } } </script></pre><div class="contentsignin">Salin selepas log masuk</div></div><p> Walau bagaimanapun, apabila kita cuba mendapatkan <code>hello world</code> pada halaman, kita akan mendapati bahawa <code> </code> tidak berfungsi dan ruang masih muncul. </p><p>Jadi, kenapa masalah ini berlaku? Ini kerana arahan <code>v-html</code> dalam Vue secara automatik akan melepaskan rentetan HTML input untuk mengelakkan serangan XSS. Vue akan menukar aksara khas (seperti <code><</code>, <code>></code>, <code>&</code>, <code>'</code>, <code>"</code>, dll.) ke dalam aksara entiti HTML yang sepadan. </p><p> Bagi watak entiti <code> </code>, Vue tidak akan menukarnya menjadi ruang tanpa pecah sebenar. Ini adalah untuk mengekalkan keserasian, kerana dalam sesetengah kes, <code> </code> memang perlu dianggap sebagai rentetan dan bukannya watak entiti. Oleh itu, Vue tidak terlepas <code> </code> secara lalai. </p><p>Memandangkan arahan <code>v-html</code> dalam Vue tidak akan menghuraikan <code> </code> dengan betul, bagaimanakah kita hendak menyelesaikan masalah ini? Dua kaedah disediakan di bawah untuk rujukan. </p><h3>1 Gunakan bar ruang </h3><p>Cara paling mudah ialah menggunakan bar ruang biasa dan bukannya <code> </code>. Sebagai contoh, kita boleh menulis seperti ini: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><template> <div>{{msg}} world</div> </template> <script> export default { data() { return { msg: 'hello' } } } </script></pre><div class="contentsignin">Salin selepas log masuk</div></div><p> Dengan cara ini, kita boleh mendapatkan rentetan <code>hello world</code> dengan betul tanpa perlu risau tentang melarikan diri. </p><h3>2. Gunakan ungkapan biasa untuk menggantikan </h3><p>Jika kita benar-benar perlu menggunakan <code> </code> dan bukannya bar ruang, maka kita boleh menggunakan ungkapan biasa untuk menggantikannya dengan ruang tanpa pecah sebenar. Sebagai contoh, kita boleh menulis: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><template> <div v-html="htmlStr"></div> </template> <script> export default { data() { return { htmlStr: 'hello world' } }, computed: { unescapeHtml() { return this.htmlStr.replace(/ /g, 'u00A0'); } } } </script></pre><div class="contentsignin">Salin selepas log masuk</div></div><p> Atribut <code>computed</code> dalam kod di atas menggantikan semua <code>htmlStr</code> dalam <code> </code> dengan aksara ruang tanpa putus sebenar dan mengembalikan hasil yang diganti. Dalam templat, kita boleh menggunakan arahan <code>v-html</code> dan memanggil atribut terkira <code>unescapeHtml</code>: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><template> <div v-html="unescapeHtml"></div> </template></pre><div class="contentsignin">Salin selepas log masuk</div></div><p> Dengan cara ini, kita boleh mendapatkan rentetan <code>hello world</code> dengan betul. </p> <p>Untuk meringkaskan, dalam Vue, <code> </code> tidak berfungsi seperti yang diharapkan seperti rentetan HTML biasa. Apa yang kita perlukan ialah beberapa kaedah yang lebih fleksibel untuk menyelesaikan masalah ini. Dengan menggunakan kaedah seperti bar ruang atau ungkapan biasa, kita boleh memintas masalah ini dan mendapatkan hasil yang betul. </p>

Atas ialah kandungan terperinci vue nbsp spaces tidak berfungsi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!