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 攻击。
相关推荐
木心操作1 小时前
js生成excel表格进阶版
开发语言·javascript·ecmascript
GISer_Jing1 小时前
sqb&ks二面(准备)
前端·javascript·面试
谢尔登1 小时前
【Webpack】模块联邦
前端·webpack·node.js
前端码虫1 小时前
2.9Vue创建项目(组件)的补充
javascript·vue.js·学习
Bottle4141 小时前
深入探究 React Fiber(译文)
前端
夜宵饽饽1 小时前
上下文工程实践 - 工具管理(上篇)
javascript·后端
汤姆Tom1 小时前
JavaScript Proxy 对象详解与应用
前端·javascript
BillKu1 小时前
Vue3中app.mount(“#app“)应用挂载原理解析
javascript·vue.js·css3
xiaopengbc1 小时前
在 React 中如何使用 useMemo 和 useCallback 优化性能?
前端·javascript·react.js