Bagaimana untuk mengekalkan ruang dalam rentetan dalam vue

Dalam Vue, sangat mudah untuk mengalih keluar ruang daripada rentetan. Apabila memaparkan rentetan dalam templat Vue, ia secara automatik melucutkan ruang pada kedua-dua sisi. Walau bagaimanapun, dalam beberapa kes, kita mungkin mahu mengekalkan ruang dalam rentetan, apakah yang perlu kita lakukan dalam kes ini? Seterusnya, saya akan memperkenalkan dua kaedah untuk menyelesaikan masalah ini.

Kaedah 1: Gunakan entiti HTML

Entiti HTML dalam Vue boleh digunakan untuk menggantikan aksara khas, seperti ruang. Dalam HTML, entiti yang sepadan dengan ruang ialah " ". Kita boleh menggantikan ruang dengan entiti ini supaya ruang akan dikekalkan semasa memaparkan templat. Contohnya adalah seperti berikut:

<template>
  <div>
    <!-- 使用HTML实体保留空格 -->
    <p>{{ content.replace(/\s/g, ' ') }}</p>
  </div>
</template>

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

Dalam kod di atas, saya menggantikan semua ruang dalam rentetan dengan entiti HTML " ". Dalam templat, entiti ini akan dihuraikan menjadi aksara ruang untuk mengekalkan ruang.

Kaedah 2: Gunakan gaya CSS

Selain menggunakan entiti HTML, kami juga boleh menggunakan gaya CSS untuk mengawal paparan ruang. Khususnya, anda boleh menggunakan atribut "ruang putih" dan menetapkan nilainya kepada "pra-bungkus" supaya ruang dalam rentetan dikekalkan. Contohnya adalah seperti berikut:

<template>
  <div>
    <!-- 使用CSS样式保留空格 -->
    <p :style="{ whiteSpace: &#39;pre-wrap&#39; }">{{ content }}</p>
  </div>
</template>

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

Gaya pengikatan di sini menggunakan arahan ":style" dalam Vue, yang boleh menggunakan sifat dan nilai CSS dalam objek JavaScript kepada elemen. Dalam contoh ini, saya menetapkan nilai atribut "whiteSpace" kepada "pra-bungkus" supaya ruang dipelihara dan dipaparkan seperti biasa dalam templat.

Ringkasan

Di atas ialah dua kaedah untuk mengekalkan ruang rentetan dalam Vue Cuma pilih kaedah yang sesuai mengikut situasi sebenar. Apabila menulis kod, adalah sangat penting untuk mengekalkan format rentetan yang konsisten kerana ia menjadikan kod kami lebih mudah dibaca dan diselenggara.

Atas ialah kandungan terperinci Bagaimana untuk mengekalkan ruang dalam rentetan dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!