解决Vue大括号字符换行踩的坑
作者:小乔FEer 发布时间:2024-04-10 13:47:43
标签:Vue,大括号,字符,换行
最近遇到这样一个问题,在页面上要显示一段自定义的文本,文本如果较长的话需要换行显示。
在HTML中可以通过<br/>标签换行,也可以通过\n转义字符换行
在Vue中用大括号显示的变量,加<br/>会直接被当成字符串显示出来,加\n显示一个空格,加\r\n显示两个空格,因为{{}}}是文本插值,内部都会按照普通字符串进行处理,可以用v-html进行显示
如下显示name变量
data() {
return{
name: '前一部分<br/>后一部分'
}
}
在元素上显示name值
<p v-html="name"></p>
补充知识:使用v-html解决Vue.js渲染过程中html标签不能被解析(html标签显示为字符串)
在网页中,后台传来的json数据中包含html标签,将该json数据绑定到Vue.js中对象中,对该对象进行for循环,发现数据中的html标签不能被解析,而是当作字符显示出来。
问题如下所示:
解决:
Vue.js中提供了v-html这个指令来解决这个问题,或者对数据对象使用{{{vm.data}}}三个大括号来包裹对象,就可以正常解析了。
代码改动如下:
此外某些情况下,使用{{{}}}符号仍然不能解析html标签,但v-htm指令却可以,可能是Vue.js存在的bug吧。
解释见下图
来源:https://blog.csdn.net/oucqsy/article/details/75098213
0
投稿
猜你喜欢
- 本文实例讲述了python获取图片颜色信息的方法。分享给大家供大家参考。具体分析如下:python的pil模块可以从图片获得图片每个像素点的
- 错误21002:[sql-dmo]用户***已经存在错误 此错误的原因多是因为将MSSQL备份移植到另一服务器还原时出现。 主要原因是原来的
- 这是一个很长的故事,嫌长的直接看最后的结论事情经过上周接了个需求,写了个小工具给客户,他要求打包成exe文件,这当然不是什么难事。因为除了写
- 将数字转换成大写的人民币,方法有很多,本例介绍的是使用js来完成的,看看下面的实现代码function changeNumMoneyToCh
- cursor就是一个Cursor对象,这个cursor是一个实现了迭代器(def__iter__())和生成器(yield)的MySQLdb
- 区块链中的共识算法在比特币公链架构解析中,就曾提到过为了实现去中介化的设计,比特币设计了一套共识协议,并通过此协议来保证系统的稳定性和防攻击
- 1.资源下载官网下载地址:https://dev.mysql.com/downloads/mysql/2.软件解压 2.1选择位置
- 之前看到很多人一直都问这个问题,不过当时我没当一回事,因为在 CSS 中要垂直居中,多数是在有高度的情况下,或者容器高度不定的情况下才用,看
- 在开发过程中,有时遇到由于缓存问题导致页面不能及时更新,有时页面引入了不必需的样式脚本文件,有时由于文件太多,字节过大导致页面的性能缓慢,为
- PostgreSQL是一种特性非常齐全的自由软件的对象-关系型数据库管理系统(ORDBMS),是以加州大学计算机系开发的POSTGRES,4
- 相信大家都想把自己完成的项目打包成EXE应用文件,然后就可以放在桌面随时都能运行了,下面来分享利用pytinstaller这个第三方库来打包
- 类和实例python是一个面向对象的语言,而面向对象最重要的概念就是类和实例, 记得刚学习的时候不太理解这些概念,直到老师说了一句”物以类聚
- mysql可以通过下面语句判断是否支持分区:SHOW VARIABLES LIKE '%partition%';如果输出:h
- 操作步骤1.下载BeautifulReport文件,本例文件下载地址 最新文件下载地址2.复制文件BeautifulReport,至pyth
- python 文件操作seek() 和 telll() 自我解释file.seek()方法格式: seek(offset,whence=0)
- 本文研究的主要是python+matplotlib实现动态绘制图片(交互式绘图)的相关内容,具体介绍和实现代码如下所示。最近在研究动态障碍物
- 下面是具体的步骤,试用于pycharm2016(亲测)1. File-->settings-->editor--&g
- Method通过一条指令即可完成:os.system('所需指令')Note: os.system('所需指令
- 本文实例讲述了js实现的全国省市二级联动下拉选择菜单。分享给大家供大家参考。具体如下:运行效果截图如下:具体代码如下:<!DOCTYP
- 一、Tesseract简介Tesseract是一个OCR库(OCR是英文Optical Character Recognition的缩写),