vue中保留字符串中的空格完美解決方案
更新時間：2023年06月05日 11:50:13 作者：jieyucx
這篇文章主要介紹了vue中保留字符串中的空格的解決方案，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
vue中保留字符串中的空格
有的時候的一些需求是需要你保留后端返回的字符串中的空格的，可當(dāng)我們用指令v-html直接將后端返回的字符串渲染到頁面時， 它會自動清除掉字符串中的空格
解決方案
1.css樣式處理 white-space：pre-wrap
<template>
<!-- 使用CSS樣式保留空格 -->
<p :style="{ whiteSpace: 'pre-wrap' }">{{ content }}</p>
</template>content就是你要渲染的帶有空格的字符串
2.將空格轉(zhuǎn)換為實(shí)體 ‘’ -> ‘ ’
<template>
<!-- 使用HTML實(shí)體保留空格 -->
<p>{{ content.replace(/\s/g, ' ') }}</p>
</template>在vue中輸入空格&在html中輸入空格
在vue中輸入空格
vue輸入多個空格解決方法（uni-app也一樣）
| 'nbsp' | '\u00a0' | 不斷行的空白格，該空格占據(jù)的寬度受字體影響(一個字符寬度)。 |
|---|---|---|
| 'ensp' | '\u2002' | 相當(dāng)全角狀態(tài)鍵入半個“空格”鍵（半個漢字的寬度，一個字符寬度）。 |
| 'emsp' | '\u2003' | 相當(dāng)全角狀態(tài)鍵入“空格”鍵（1個漢字的寬度，兩個字符寬度）。 |
例：
<text class="txt">備<text v-html="'\u2003\u2003'"></text>注</text>
在html中輸入空格
例：
<div class="txt">備 注</text>
到此這篇關(guān)于vue中保留字符串中的空格的文章就介紹到這了,更多相關(guān)vue保留字符串空格內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)web分頁組件的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了vant-image本地圖片無法顯示的解決方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了vue組件內(nèi)部引入外部js文件的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
這段文章介紹了如何在Vue項(xiàng)目中根據(jù)窗口尺寸動態(tài)設(shè)置元素寬度的方法,重點(diǎn)提及了vw單位、resize事件及@vueuse/core庫的應(yīng)用,適用于前端開發(fā)人員優(yōu)化布局適應(yīng)性屏幕2026-05-05
uni-app是一個使用Vue.js開發(fā)的多端開發(fā)框架,下面這篇文章主要給大家介紹了關(guān)于uni-app?vue3接口請求封裝的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
淺談Vue.js中ref ($refs)用法舉例總結(jié)
本篇文章主要介紹了淺談Vue.js中ref ($refs)用法舉例總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
開發(fā)一個Parcel-vue腳手架工具(詳細(xì)步驟)
這篇文章主要介紹了開發(fā)一個Parcel-vue腳手架工具(詳細(xì)步驟)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
vue中使用gantt-elastic實(shí)現(xiàn)可拖拽甘特圖的示例代碼
這篇文章主要介紹了vue中使用gantt-elastic實(shí)現(xiàn)可拖拽甘特圖,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
Vue3 History模式刷新404問題的原因分析和解決方案
在 Vue3 項(xiàng)目開發(fā)中,使用vue-router的 History 模式（無 #號路由）能讓 URL 更簡潔美觀,但部署后刷新非根路徑（如/xinlan、/hongyou）時,常會出現(xiàn) 404 錯誤,本文結(jié)合實(shí)際項(xiàng)目場景,從原理分析到服務(wù)器配置,完整解決這一問題,需要的朋友可以參考下2026-03-03
這篇文章主要介紹了Vue聲明式渲染詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05