解决Vue大括号字符换行踩的坑


Posted in Javascript onNovember 09, 2020

最近遇到这样一个问题,在页面上要显示一段自定义的文本,文本如果较长的话需要换行显示。

在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大括号字符换行踩的坑

解决:

Vue.js中提供了v-html这个指令来解决这个问题,或者对数据对象使用{{{vm.data}}}三个大括号来包裹对象,就可以正常解析了。

代码改动如下:

解决Vue大括号字符换行踩的坑

此外某些情况下,使用{{{}}}符号仍然不能解析html标签,但v-htm指令却可以,可能是Vue.js存在的bug吧。

解释见下图

解决Vue大括号字符换行踩的坑

以上这篇解决Vue大括号字符换行踩的坑就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
推荐一些非常不错的javascript学习资源站点
Aug 29 Javascript
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
Dec 23 Javascript
Prototype Class对象学习
Jul 19 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
Dec 26 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
Apr 13 Javascript
React+Webpack快速上手指南(小结)
Aug 15 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
深入了解JavaScript 防抖和节流
Sep 12 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
Mar 31 Javascript
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
Apr 19 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 #Javascript
vue 防止页面加载时看到花括号的解决操作
Nov 09 #Javascript
Webpack的Loader和Plugin的区别
Nov 09 #Javascript
解决vue初始化项目一直停在downloading template的问题
Nov 09 #Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 #Javascript
解决vue init webpack 下载依赖卡住不动的问题
Nov 09 #Javascript
详解nginx配置vue h5 history去除#号
Nov 09 #Javascript
You might like
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
PHP大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
PHP编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
取得传值的函数
2006/10/27 Javascript
让iframe自适应高度(支持XHTML,支持FF)
2007/07/24 Javascript
关于javascript中的parseInt使用技巧
2009/09/03 Javascript
MooTools 1.2介绍
2009/09/14 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
jquery禁止回车触发表单提交
2014/12/12 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
JavaScript基础教程——入门必看篇
2016/05/20 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
详细介绍RxJS在Angular中的应用
2017/09/23 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
详解angular2.x创建项目入门指令
2018/10/11 Javascript
微信小程序引用iconfont图标的方法
2018/10/22 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
2019/01/17 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
Python 字符串操作方法大全
2014/03/11 Python
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
Python探索之Metaclass初步了解
2017/10/28 Python
python模块之paramiko实例代码
2018/01/31 Python
flask中的wtforms使用方法
2018/07/21 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
2014/11/05 HTML / CSS
电气工程及其自动化学生实习自我鉴定
2013/09/19 职场文书
物流管理毕业生自荐信
2013/10/24 职场文书
新闻学专业应届生求职信
2013/11/08 职场文书
党员“四风”方面存在问题及整改措施
2014/09/24 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
《将心比心》教学反思
2016/02/23 职场文书