vue页面中怎么显示多个空格-从普通空格到非断行空格与v-html的使用

一、问题描述

当想通过给页面增加空格对齐文字时,无论增加了多少个空格,都没有任何效果。

二、解决方案

产生的原因是因为在浏览器进行解析的时候, 会将多个空格合并成分成一个空格。因此无论使用多少个空格,在页面中均显示一个空格。

方案一

首先,想到了 ****  ,全称为Non-breaking Space,表示不在此处换行。将空格换成** **。看下效果:

方案二

ps: 很是奇怪啊,写这篇博客之前通过   来实现多个空格是不能实现的。可能跟使用vue2有关吧,上述的演示的代码使用的是vue3。下面是当时的实现方案:

使用v-html来实现了:

v-html 的内容直接作为普通 HTML 插入------ Vue 模板语法是不会被解析的。在单文件组件,scoped 样式将不会作用于 v-html 里的内容,因为 HTML 内容不会被 Vue 的模板编译器解析。

实现方法如下:

复制代码
<div v-html="labelAccessory" />
computed: {
  labelAccessory() {
    return `阿&nbsp;&nbsp;叶&nbsp;&nbsp;
    今&nbsp;&nbsp;天&nbsp;&nbsp;
    敲&nbsp;&nbsp;代&nbsp;&nbsp;
    码&nbsp;&nbsp;了&nbsp;&nbsp;吗`
  }
}

实现效果如下:

需要注意的是:

在你的站点上动态渲染任意的 HTML 是非常危险的,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要将用户提供的内容作为插值。

对以上提到的可信内容简GPT了一下,仅供参考:

"可信内容"指的是你信任并且确定是安全的内容,例如:

  1. 你自己的静态内容:你自己创建的、没有包含用户提供数据的 HTML 内容,例如网站的静态文本或者固定的 HTML 标记。
  2. 从受信任来源获取的内容:从可信任的数据源、API 或数据库中获取的数据,例如你自己的数据库中存储的内容。
  3. 经过适当转义和过滤的用户输入:用户提供的内容经过了严格的输入验证和过滤,确保其中不包含任何恶意代码或脚本,并且在插值到 HTML 中之前进行了正确的转义以防止 XSS 攻击。
相关推荐
jojo是只猫9 分钟前
前端vue对接海康摄像头流程
前端·javascript·vue.js
10年前端老司机4 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程8 小时前
2025前端面试题
前端·面试
前端小趴菜059 小时前
React - createPortal
前端·vue.js·react.js
晓131310 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo10 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴11 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_78912 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼12 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原12 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序