VueJS 换行符未正确渲染

2024-04-04

我遇到以下问题,我从包含换行符的 API 读取数据字符串\n我想在我的模板中正确显示它们。

但是当我做类似的事情时:

<p>{{ mytext }}</p>

文本显示为\n其中的字符就像普通文本一样。

响应中的文本字符串的格式为"Hello, \n what's up? \n My name is Joe".

我在这里做错了什么?


甚至不是 vue 问题,你可以简单地使用 CSS 并应用white-space: pre;到内容。您不需要为此额外的软件包。

new Vue({
  el: '#app',
  data: {
    text: 'Hello Vue.\nThis is a line of text.\nAnother line of text.\n'
  }
})
.pre-formatted {
  white-space: pre;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>

<div id="app">
  <div class="pre-formatted">{{ text }}</div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

VueJS 换行符未正确渲染 的相关文章

  • ReactiveX:仅对每组中的最后一项进行分组和缓冲

    如何对 Observable 进行分组 并从每个 GroupedObservable 中仅将最后发出的项保留在内存中 这样每个组的行为就像BehaviorSubject 一样 像这样的东西 user 1 msg Anyone here us
  • 从 php 到 JavaScript 的数组

    我正在尝试使用 json 将数组列表从 php 传输到 javascript 但它不起作用 JS ajax url getProfilePhotos php type post post or get method data if you
  • 如何将 Django 中的数组传递给模板并在 JavaScript 中使用它

    我想将数组传递给模板 然后通过 JavaScript 使用它 In my views py I have arry1 Str 500 20 return render to response test html array1 arry1 在
  • 为什么隐式符号到字符串转换会导致 JavaScript 中出现类型错误?

    有一个 toString on Symbol在 ES6 中 它返回字符串表示形式Symbol 但想知道为什么 Symbol 不起作用 运行这个表达式会抛出TypeError我没想到 后者只是打电话吗 toString 在一个新的Symbol
  • 我如何使用 querySelector() 选择具有双类的元素

    当我想使用 querySelector 选择元素时遇到问题 ul class xoxo blogroll ul 我怎样才能选择它ul元素 在我的代码中我像这样使用 var list document body querySelector u
  • 实现悬停信息框

    我有一个日历 当用户将鼠标悬停在单元格上时 会出现一个很大的信息框 其中包含该日期的详细信息 虽然当用户离开时使信息框消失 但我遇到了一些麻烦 我基本上想要它 这样当鼠标光标移出信息框隐藏的日历单元格时 它就会消失 但我遇到了麻烦 因为mo
  • 在 setInterval / setTimeout 中使用变量作为时间[重复]

    这个问题在这里已经有答案了 这是一个示例情况 var count time 1000 setInterval function count 1 time 上面的代码会将 count 变量加 1 即 1000 毫秒 看来 setInterva
  • html canvas动画卡顿

    谁能解释为什么提供的画布动画断断续续 我创建了一个测试存根来演示该问题 我在桌面上的 FF Chrome IE 以及 Android 上的 FF 和 Chrome 中看到了卡顿现象 口吃是由于垃圾收集造成的吗 似乎 raf 在每次调用时都会
  • 为什么我们使用 SpreadsheetApp.flush()?

    我的理解是 flush https developers google com apps script reference spreadsheet spreadsheet app flush有助于在功能发生时执行这些功能 而无需将它们捆绑在
  • 如何循环遍历对象数组并生成键值对?

    我有一个像这样的对象数组 let someObj items id 12 value true id 34 value true id 56 value false 我想将其添加到现有对象中 其中 id 是该对象的键 如下所示 let ob
  • 使 Material UI Grid 项目的子项拉伸以适合父容器的剩余高度

    1 现状 我有一个包含 4 个网格项的 Material UI 网格容器 每个 Grid 项中都有一个 Typography 组件 其中包含标题和包含一些内容的 Card 如下所示 2 期望的外观 我希望卡片填充网格项目的剩余高度并且不超过
  • “|”是什么意思(单管道)在 JavaScript 中做什么?

    console log 0 5 0 0 console log 1 0 1 console log 1 0 1 为什么0 5 0返回零 但任何整数 包括负数 都返回输入整数 单管道 有什么作用 这是一个按位或 https developer
  • 带有 mkdocs 的本地 mathjax

    我想在无法访问互联网的计算机上使用 MathJax 和 Mkdocs 因此我不能只调用 Mathjax CDN Config mkdocs yml site name My Docs extra javascript javascripts
  • 为什么 re.findall 在查找字符串中的三元组项时不具体。 Python

    所以我有四行代码 seq ATGGAAGTTGGATGAAAGTGGAGGTAAAGAGAAGACGTTTGA OR 0 re findall r ATG 9 TAA TAG TGA seq 首先让我解释一下我正在尝试做什么 如果这令人困惑
  • 如何知道浏览器空闲时间?

    如何跟踪浏览器空闲时间 我用的是IE8 我没有使用任何会话管理 也不想在服务器端处理它 这是纯 JavaScript 方法来跟踪空闲时间 并在达到一定限制时执行一些操作 var IDLE TIMEOUT 60 seconds var idl
  • 将 window.location 传递给 Flask url_for

    我正在使用 python 在我的页面上 当匿名用户转到登录页面时 我想将一个变量传递到后端 以便它指示用户来自哪里 发送 URL 因此 当用户单击此锚链接时 a href Sign in a 我想发送用户当前所在页面的当前 URL
  • 有没有办法伪造同步 XHR 请求?

    我正在使用 Emscripten 系统将一堆 C 代码移植到 Javascript C 代码有很多调用fopen这是一个同步 IO 调用 在 Emscripten 中 我们使用对本地资源的 XHR 请求来模拟这一点however 在 Fir
  • 不使用控件时,视频元素在 Chrome 中消失

    So I think这是一个浏览器错误 它出现在一个更复杂的设计 网站中 但我已经进行了很好的尝试 简化了我的代码和设计等 并发现了以下内容 嵌入时
  • 检测浏览器选项卡是否具有焦点

    是否有可靠的跨浏览器方法来检测选项卡是否具有焦点 场景是 我们有一个定期轮询股票价格的应用程序 如果页面没有焦点 我们可以停止轮询并为每个人节省流量噪音 特别是当人们喜欢打开具有不同投资组合的多个选项卡时 Is window onblur
  • AngularJS 在指令运行之前通过 AJAX 检索数据

    我正在使用 AngularUIuiMap http angular ui github com directives map实例化谷歌地图的指令 uiMap 指令非常适合处理硬编码数据 mapOptions and myMarkers 但是

随机推荐

  • 将价格四舍五入至最接近的 $xx.99

    我想将价格四舍五入 向上或向下 到最接近的 xx 99 美元 例如 17 99 gt Stay as is 22 03 gt 21 99 33 85 gt 33 99 45 gt 44 99 加 0 01 四舍五入 减 0 01 input
  • JavaScript 中的 const 关键字范围

    1 gt gt gt const a 2 2 gt gt gt var a 3 3 gt gt gt a 4 4 gt gt gt a print 2 为什么允许运行3号线 const 看起来比没有任何关键字更 全局 const范围被定义为
  • 根据Python的条件将请求传递给不同的类

    我正在设计一个 API 它处理不同类型的车辆 例如轿车 公共汽车和货车 有一个端点POST vehicle这将需要一个定义的主体 registration str date of purchase datetime str vehicle
  • 突出显示 VIM 中的特定列

    我经常处理包含固定位置数据的文件 如果您愿意的话 可以使用非分隔的 CSV 文件 通常 我想突出显示特定的列 I tried match ErrorMsg gt 30v lt 40v 但这运行得非常慢并且只匹配第一行 我想该文件可能太大了
  • ' 隐式转换为 'System.Collections.Generic.IList< >'' aria-label='无法将类型 'System.Collections.Generic.List< >' 隐式转换为 'System.Collections.Generic.IList< >''> 无法将类型 'System.Collections.Generic.List< >' 隐式转换为 'System.Collections.Generic.IList< >'

    这篇文章有很多可能的重复项 但我尝试了其中的大部分 不幸的是我的错误仍然存 在 发生 错误是 错误 1 无法隐式转换类型 System Collections Generic List
  • 如何在 iOS 中使用“容器视图”?

    我注意到 XCode 中的 UI 组件 Container View 根据提供的描述 我想利用它在几个不同的屏幕上显示我的应用程序的可重用组件 我一直在网上寻找基本教程或一些相关文档 但是我还没有找到任何有用的东西 请有人建议如何连接并使用
  • 我应该如何得到Lasso模型的系数?

    这是我的代码 library MASS library caret df lt Boston set seed 3721 cv 10 folds lt createFolds df medv k 10 lasso grid lt expan
  • 如何在方向改变后保留播放视频的片段片段的实例?

    我有一个 YouTube API 片段 静态添加到我的 xml 清单文件中 即内部包含 YouTube 播放器的片段 我的项目中没有扩展片段的文件 在我的活动类中 我将这行代码放在onCreate我的活动课 youTubePlayerFra
  • 以通用方式选择有效的随机枚举值

    假设我们有一个枚举类型E enum class E underlying type of E v1 uE1 v2 uE2 vN uEN typedef typename std underlying type
  • 用c#将html转为jpg

    我做了一些搜索 尝试从 html 页面生成 jpg 文件 并找到了一种名为 IECapt 或类似的解决方案 需要服务器上的 IE 才能工作 这不是我想要的 这就是我想要做的 从 html 页面生成 jpg 图像 html 页面只是文本 然后
  • 无法转义正则表达式中的反斜杠?

    我正在使用以下正则表达式 a zA Z0 9 s 1 1000 我知道它很丑陋 但到目前为止 它已经达到了它的目的 除了反斜杠不被允许 因为我认为它应该因为它被转义了 另外 我尝试过 代替 但得到了相同的结果 有任何想法吗 如果您将其放入程
  • 如何控制边框高度?

    我有两个div 一个在左边 另一个在右边 现在我想用它们之间的边框来划分这两个 div 但是全高的边框看起来很糟糕 我想控制边框的高度 我怎么能这样做呢 边框将始终处于包含框的完整长度 元素的高度加上其填充 除了调整其应用的元素的高度之外
  • 从微调器中删除文本

    I m trying to style a spinner What I currently have is this It is EditText其次是Spinner Now I m using custom style as follo
  • 将一个 Cursor 的内容添加到另一个 Cursor

    我想连接两个游标 以便连接后第二个游标的内容也应出现在第一个游标中 这正是我的代码 public final Uri AllImage URI Int MediaStore Images Media INTERNAL CONTENT URI
  • 如何在 VueJS 单文件组件中正确使用“作用域”样式?

    The docs https vue loader vuejs org en features scoped css html在 VueJS 上声明scoped应限制组件的样式 但是如果我创建两个相同的组件baz样式 它会从一个组件泄漏到另
  • Cocoa:隐藏一个应用程序

    是否可以使用 cocoa 隐藏一个特定的应用程序 我知道您可以使用以下代码隐藏所有其他应用程序 NSWorkspace sharedWorkspace performSelectorOnMainThread selector hideOth
  • php 的 sleep() 输出

    我试图基本上每秒运行一个循环 持续 25 秒 for i 0 i lt 25 i 1 echo i sleep 1 问题是它在完全完成之前不会输出 所以在循环继续 25 次之后 有没有办法做到这一点 以便它会在每次睡眠前输出 而不是等到整个
  • 随机但仅在 Chrome 中

    我有这个函数来创建随机的数字范围 function randomRange min max return new Array max min join split map function v i return min i sort fun
  • 返回点击按钮的索引?

    我有一个包含 30 个按钮的数组 我有一个变量按钮Clicked 当我按下按钮时 如何获取索引并将索引号存储在单击的按钮中 谢谢 JButton buttons new JButton 30 for int i 1 i lt 30 i in
  • VueJS 换行符未正确渲染

    我遇到以下问题 我从包含换行符的 API 读取数据字符串 n我想在我的模板中正确显示它们 但是当我做类似的事情时 p mytext p 文本显示为 n其中的字符就像普通文本一样 响应中的文本字符串的格式为 Hello n what s up