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 攻击。
相关推荐
I'm写代码2 分钟前
el-tree树形结构笔记
javascript·vue.js·笔记
万少3 分钟前
最新 HarmonyOS API 20 知识库 重磅推出
前端
蓝易云10 分钟前
CentOS 7上安装X virtual framebuffer (Xvfb) 的步骤以及如何解决无X服务器的问题
前端·后端·centos
到底起什么网名才能不重名10 分钟前
使用各种CSS美化网页
前端·css·vscode·bootstrap·html
然我11 分钟前
面试必问:JS 事件机制从绑定到委托,一篇吃透所有考点
前端·javascript·面试
小蜜蜂嗡嗡20 分钟前
flutter封装vlcplayer的控制器
前端·javascript·flutter
一tiao咸鱼22 分钟前
如何简单使用 prompt
前端·aigc
cdbqss128 分钟前
VB.net编写的身份证类
前端·.net
骑自行车的码农1 小时前
React短文系列 遍历fiber树 App的创建
前端·react.js
AskSky1 小时前
为了搞一个完美的健身APP,我真是费尽心机
前端