vue nbsp spaces tidak berfungsi

Dalam Vue, kadangkala kami menggunakan untuk menggantikan ruang, tetapi mendapati tidak berfungsi dan ruang masih muncul. kenapa ni? Dalam artikel ini, kami akan meneroka isu ini dan menyediakan cara untuk menyelesaikannya.

Pertama sekali, kita perlu memahami perbezaan antara dan ruang. 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 biasanya digunakan untuk menyediakan jurang ruang pada kedudukan yang tidak dibenarkan pecah.

Dalam Vue, kami boleh menggunakan arahan v-html untuk memaparkan rentetan HTML ke halaman secara dinamik. Sebagai contoh, kita boleh menulis seperti ini:

<template>
  <div v-html="htmlStr"></div>
</template>
<script>
export default {
  data() {
    return {
      htmlStr: 'hello world'
    }
  }
}
</script>

Walau bagaimanapun, apabila kita cuba mendapatkan hello world pada halaman, kita akan mendapati bahawa tidak berfungsi dan ruang masih muncul.

Jadi, kenapa masalah ini berlaku? Ini kerana arahan v-html dalam Vue secara automatik akan melepaskan rentetan HTML input untuk mengelakkan serangan XSS. Vue akan menukar aksara khas (seperti 68d687f5a0cabed7ef4cbdc5e9d691b0, &, ', ", dll.) ke dalam aksara entiti HTML yang sepadan.

Bagi watak entiti , Vue tidak akan menukarnya menjadi ruang tanpa pecah sebenar. Ini adalah untuk mengekalkan keserasian, kerana dalam sesetengah kes, memang perlu dianggap sebagai rentetan dan bukannya watak entiti. Oleh itu, Vue tidak terlepas secara lalai.

Memandangkan arahan v-html dalam Vue tidak akan menghuraikan dengan betul, bagaimanakah kita hendak menyelesaikan masalah ini? Dua kaedah disediakan di bawah untuk rujukan.

1 Gunakan bar ruang

Cara paling mudah ialah menggunakan bar ruang biasa dan bukannya . Sebagai contoh, kita boleh menulis seperti ini:

<template>
  <div>{{msg}} world</div>
</template>
<script>
export default {
  data() {
    return {
      msg: 'hello'
    }
  }
}
</script>

Dengan cara ini, kita boleh mendapatkan rentetan hello world dengan betul tanpa perlu risau tentang melarikan diri.

2. Gunakan ungkapan biasa untuk menggantikan

Jika kita benar-benar perlu menggunakan dan bukannya bar ruang, maka kita boleh menggunakan ungkapan biasa untuk menggantikannya dengan ruang tanpa pecah sebenar. Sebagai contoh, kita boleh menulis:

<template>
  <div v-html="htmlStr"></div>
</template>
<script>
export default {
  data() {
    return {
      htmlStr: 'hello world'
    }
  },
  computed: {
    unescapeHtml() {
      return this.htmlStr.replace(/ /g, 'u00A0');
    }
  }
}
</script>

Atribut computed dalam kod di atas menggantikan semua htmlStr dalam dengan aksara ruang tanpa putus sebenar dan mengembalikan hasil yang diganti. Dalam templat, kita boleh menggunakan arahan v-html dan memanggil atribut terkira unescapeHtml:

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

Dengan cara ini, kita boleh mendapatkan rentetan hello world dengan betul.

Untuk meringkaskan, dalam Vue, 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.

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