vue中保留字符串中的空格完美解決方案
更新時間：2023年06月05日 11:50:13 作者：jieyucx
這篇文章主要介紹了vue中保留字符串中的空格的解決方案，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
vue中保留字符串中的空格
有的時候的一些需求是需要你保留后端返回的字符串中的空格的，可當我們用指令v-html直接將后端返回的字符串渲染到頁面時， 它會自動清除掉字符串中的空格
解決方案
1.css樣式處理 white-space：pre-wrap
<template>
<!-- 使用CSS樣式保留空格 -->
<p :style="{ whiteSpace: 'pre-wrap' }">{{ content }}</p>
</template>content就是你要渲染的帶有空格的字符串
2.將空格轉(zhuǎn)換為實體 ‘’ -> ‘ ’
<template>
<!-- 使用HTML實體保留空格 -->
<p>{{ content.replace(/\s/g, ' ') }}</p>
</template>在vue中輸入空格&在html中輸入空格
在vue中輸入空格
vue輸入多個空格解決方法（uni-app也一樣）
| 'nbsp' | '\u00a0' | 不斷行的空白格，該空格占據(jù)的寬度受字體影響(一個字符寬度)。 |
|---|---|---|
| 'ensp' | '\u2002' | 相當全角狀態(tài)鍵入半個“空格”鍵（半個漢字的寬度，一個字符寬度）。 |
| 'emsp' | '\u2003' | 相當全角狀態(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)文章
在vue中使用防抖和節(jié)流,防止重復點擊或重復上拉加載實例
今天小編就為大家分享一篇在vue中使用防抖和節(jié)流,防止重復點擊或重復上拉加載實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
本文主要介紹了Vue 中頁面?zhèn)髦档亩喾N方式小結(jié),主要包括路由傳參、Vuex 狀態(tài)管理、Props 屬性和事件傳遞數(shù)據(jù)這幾種,具有一定的參考價值,感興趣的可以了解一下2023-10-10
這篇文章主要介紹了vue中onmounted周期里獲取不到dom的原因及分析,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue3+ts+elementui-plus二次封裝彈框?qū)崙?zhàn)教程
這篇文章主要介紹了vue3+ts+elementui-plus二次封裝彈框?qū)崙?zhàn)教程,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了Vue組件數(shù)據(jù)傳遞與props校驗方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要為大家介紹了Vue中動態(tài)Class的實戰(zhàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
這篇文章主要介紹了解決iView Table組件寬度只變大不變小的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue?頁面刷新、重置、更新頁面所有數(shù)據(jù)的示例代碼
Vue.js提供了多種方式來實現(xiàn)頁面刷新、重置和更新頁面所有數(shù)據(jù)的功能,下面通過示例代碼演示vue?頁面刷新、重置、更新頁面所有數(shù)據(jù),感興趣的朋友跟隨小編一起看看吧2024-01-01
關(guān)于SpringBoot與Vue交互跨域問題解決方案
最近在利用springboot+vue整合開發(fā)一個前后端分離的個人博客網(wǎng)站，所以這一篇總結(jié)一下在開發(fā)中遇到的一個問題，關(guān)于解決在使用vue和springboot在開發(fā)前后端分離的項目時，如何解決跨域問題。在這里分別分享兩種方法，分別在前端vue中解決和在后臺springboot中解決。2021-10-10
Vue3?中的?readonly?特性及函數(shù)使用詳解
readonly是Vue3中提供的一個新特性，用于將一個響應(yīng)式對象變成只讀對象，這篇文章主要介紹了Vue3?中的?readonly?特性詳解,需要的朋友可以參考下2023-04-04