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.将空格转换为实体 ‘’ -> ‘ ’
<template>
<!-- 使用HTML实体保留空格 -->
<p>{{ content.replace(/\s/g, ' ') }}</p>
</template>在vue中输入空格&在html中输入空格
在vue中输入空格
vue输入多个空格解决方法（uni-app也一样）
| 'nbsp' | '\u00a0' | 不断行的空白格，该空格占据的宽度受字体影响(一个字符宽度)。 |
|---|---|---|
| 'ensp' | '\u2002' | 相当全角状态键入半个“空格”键（半个汉字的宽度，一个字符宽度）。 |
| 'emsp' | '\u2003' | 相当全角状态键入“空格”键（1个汉字的宽度，两个字符宽度）。 |
例：
<text class="txt">备<text v-html="'\u2003\u2003'"></text>注</text>
在html中输入空格
例：
<div class="txt">备 注</text>
到此这篇关于vue中保留字符串中的空格的文章就介绍到这了,更多相关vue保留字符串空格内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了Vue实现web分页组件的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了vant-image本地图片无法显示的解决方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了vue组件内部引入外部js文件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
这段文章介绍了如何在Vue项目中根据窗口尺寸动态设置元素宽度的方法,重点提及了vw单位、resize事件及@vueuse/core库的应用,适用于前端开发人员优化布局适应性屏幕2026-05-05
uni-app是一个使用Vue.js开发的多端开发框架,下面这篇文章主要给大家介绍了关于uni-app vue3接口请求封装的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
本篇文章主要介绍了浅谈Vue.js中ref ($refs)用法举例总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了开发一个Parcel-vue脚手架工具(详细步骤)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
vue中使用gantt-elastic实现可拖拽甘特图的示例代码
这篇文章主要介绍了vue中使用gantt-elastic实现可拖拽甘特图,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-07-07
Vue3 History模式刷新404问题的原因分析和解决方案
在 Vue3 项目开发中,使用vue-router的 History 模式（无 #号路由）能让 URL 更简洁美观,但部署后刷新非根路径（如/xinlan、/hongyou）时,常会出现 404 错误,本文结合实际项目场景,从原理分析到服务器配置,完整解决这一问题,需要的朋友可以参考下2026-03-03
这篇文章主要介绍了Vue声明式渲染详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
最新评论