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中使用防抖和节流,防止重复点击或重复上拉加载实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
本文主要介绍了Vue 中页面传值的多种方式小结,主要包括路由传参、Vuex 状态管理、Props 属性和事件传递数据这几种,具有一定的参考价值,感兴趣的可以了解一下2023-10-10
这篇文章主要介绍了vue中onmounted周期里获取不到dom的原因及分析,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
vue3+ts+elementui-plus二次封装弹框实战教程
这篇文章主要介绍了vue3+ts+elementui-plus二次封装弹框实战教程,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
这篇文章主要介绍了Vue组件数据传递与props校验方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要为大家介绍了Vue中动态Class的实战示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
这篇文章主要介绍了解决iView Table组件宽度只变大不变小的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
Vue.js提供了多种方式来实现页面刷新、重置和更新页面所有数据的功能,下面通过示例代码演示vue 页面刷新、重置、更新页面所有数据,感兴趣的朋友跟随小编一起看看吧2024-01-01
最近在利用springboot+vue整合开发一个前后端分离的个人博客网站，所以这一篇总结一下在开发中遇到的一个问题，关于解决在使用vue和springboot在开发前后端分离的项目时，如何解决跨域问题。在这里分别分享两种方法，分别在前端vue中解决和在后台springboot中解决。2021-10-10
readonly是Vue3中提供的一个新特性，用于将一个响应式对象变成只读对象，这篇文章主要介绍了Vue3 中的 readonly 特性详解,需要的朋友可以参考下2023-04-04
最新评论