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 , <code>>, &, ', ", 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!