現(xiàn)象

最近在Vue2項(xiàng)目開發(fā)中遇到個(gè)奇怪的現(xiàn)象，用戶往數(shù)據(jù)庫存了中間有四個(gè)空格的數(shù)據(jù)，數(shù)據(jù)庫存儲(chǔ)正常，接口返回的數(shù)據(jù)也是帶四個(gè)空格沒問題，但頁面展示只有一個(gè)空格。

原因

在HTML/Vue中，多個(gè)連續(xù)的空格會(huì)合并為一個(gè)空格。

解決方案

1.插值表達(dá)式 + 正則

<template>
  <span>{{ space1 }}</span> 
  <span>{{ space2} }</span>
</template>

<script>
 export default {
   data() {
     //正確寫法
     space1: '這是   空格'.replace(/\s/g, '\xa0'),//頁面顯示效果：這是   空格
     //錯(cuò)誤寫法
     space2: '這是   空格'.replace(/\s/g, '&nbsp;'),//頁面顯示效果：這是&nbsp;&nbsp;&nbsp;空格
   }
 }
</script>

在Vue2中，如果使用插值表達(dá)，則需使用\xa0來表示空格，如果直接使用 來表示空格，它不會(huì)顯示為空格，而是會(huì)被當(dāng)成字符實(shí)體解析。

2.v-html指令 + 正則

<template>
  <span v-html="space1">{{ space1 }}</span> 
  <span v-html="space2">{{ space2} }</span>
</template>

<script>
 export default {
   data() {
     //正確寫法1
     space1: '這是   空格'.replace(/\s/g, '\xa0'),//頁面顯示效果：這是   空格
     //正確寫法2
     space2: '這是   空格'.replace(/\s/g, '&nbsp;'),//頁面顯示效果：這是   空格
   }
 }
</script>

在Vue2中，如果使用v-html指令方式，則用\xa0或 來表示空格都可以正常顯示。

3.v-html指令／插值表達(dá)式 + CSS

如果不對(duì)空格進(jìn)行轉(zhuǎn)義，在v-html指令／插值表達(dá)式模式下直接給元素添加如下樣式也能實(shí)現(xiàn)想要的效果。

<template>
  <span style="white-space:pre;" v-html="'這是   空格'"></span> 
</template>

其中，white-space:pre;是保留所有空白或換行符（回車鍵），可以實(shí)現(xiàn)原樣輸出。

番外

在Vue2中，如果在模板標(biāo)簽中直接使用 作為空格，則在 compile 的過程中會(huì)被轉(zhuǎn)換成一個(gè)空格。而直接使用\xa0來表示空格，則會(huì)被當(dāng)成字符實(shí)體解析。

<template>
  <!-- 頁面顯示效果：這是 空格 -->
  <span>這是&nbsp;&nbsp;&nbsp;空格'</span>
  <!-- 頁面顯示效果：這是\xa0\xa0\xa0 空格 -->
  <span>這是\xa0\xa0\xa0空格'</span>
</template>

HTML提供的幾種空格實(shí)體

HTML提供的幾種空格實(shí)體（space entity），它們擁有不同的寬度。非斷行空格（ ）是常規(guī)空格的寬度，可運(yùn)行于所有主流瀏覽器。其他幾種空格（      ‌‍）在不同瀏覽器中寬度各異。

 

它叫不換行空格，全稱No-Break Space，它是最常見和我們使用最多的空格，大多數(shù)的人可能只接觸了 ，它是按下space鍵產(chǎn)生的空格。在HTML中，如果你用空格鍵產(chǎn)生此空格，空格是不會(huì)累加的（只算1個(gè)）。要使用html實(shí)體表示才可累加，該空格占據(jù)寬度受字體影響明顯而強(qiáng)烈。

 

它叫半角空格，全稱是En Space，en是字體排印學(xué)的計(jì)量單位，為em寬度的一半。根據(jù)定義，它等同于字體度的一半（如16px字體中就是8px）。名義上是小寫字母n的寬度。此空格傳承空格家族一貫的特性：透明的，此空格有個(gè)相當(dāng)穩(wěn)健的特性，就是其占據(jù)的寬度正好是1/2個(gè)中文寬度，而且基本上不受字體影響。

 

它叫角空格，全稱是Em Space，em是字體排印學(xué)的計(jì)量單位，相當(dāng)于當(dāng)前指定的點(diǎn)數(shù)。例如，1 em在16px的字體中就是16px。此空格也傳承空格家族一貫的特性：透明的，此空格也有個(gè)相當(dāng)穩(wěn)健的特性，就是其占據(jù)的寬度正好是1個(gè)中文寬度，而且基本上不受字體影響。

 

它叫窄空格，全稱是Thin Space。我們不妨稱之為瘦弱空格，就是該空格長得比較瘦弱，身體單薄，占據(jù)的寬度比較小。它是em之六分之一寬。

‌

它叫零寬不連字，全稱是Zero Width Non Joiner，簡(jiǎn)稱ZWNJ，是一個(gè)不打印字符，放在電子文本的兩個(gè)字符之間，抑制本來會(huì)發(fā)生的連字，而是以這兩個(gè)字符原本的字形來繪制。Unicode中的零寬不連字字符映射為U+200C。

‍

它叫零寬連字，全稱是Zero Width Joiner，簡(jiǎn)稱ZWJ，是一個(gè)不打印字符，放在某些需要復(fù)雜排版語言（如阿拉伯語、印地語）的兩個(gè)字符之間，使得這兩個(gè)本不會(huì)發(fā)生連字的字符產(chǎn)生了連字效果。零寬連字符的Unicode碼位是U+200D。

此外，瀏覽器還會(huì)把以下字符當(dāng)作空白進(jìn)行解析：空格（ ）、制表位（	）、換行（
）和回車（
）還有（　）等等。

Js中的空格

1.String.fromCharCode(32)

2.\xa0：屬于latin（ISO/IEC_8859-1，拉丁字母）中的擴(kuò)展字符集字符，代表空白符nbsp(non-breaking space)。

3.\u0020 ：屬于Unicode字符，用法和\xa0一樣

4.\x20 ：標(biāo)準(zhǔn)鍵盤碼值表-十六進(jìn)制。

5.%20 ：對(duì)URI 進(jìn)行解碼的樣式，需要用到decodeURIComponent。如decodeURIComponent('%20')后會(huì)顯示1個(gè)空格。

6.\t: 這種相當(dāng)于按了tab鍵，一個(gè)相當(dāng)于4個(gè)空格。

到此這篇關(guān)于詳解Vue如何將多個(gè)空格被合并顯示成一個(gè)空格的文章就介紹到這了,更多相關(guān)Vue合并多個(gè)空格內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論