解决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 相关文章推荐
动态调用CSS文件的JS代码
Jul 29 Javascript
js中复制行和删除行的操作实例
Jun 25 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
javascript 实现子父窗体互相传值的简单实例
Feb 17 Javascript
对Web开发中前端框架与前端类库的一些思考
Mar 27 Javascript
JavaScript检查数字是否为整数或浮点数的方法
Jun 09 Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 Javascript
jQuery简单实现中间浮窗效果
Sep 04 Javascript
微信小程序动态增加按钮组件
Sep 14 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
Sep 27 Javascript
原生js实现商品筛选功能
Oct 28 Javascript
JavaScript 禁止用户保存图片的实现代码
Apr 28 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
php FLEA中二叉树数组的遍历输出
2012/09/26 PHP
php stripslashes和addslashes的区别
2014/02/03 PHP
PHP封装的Twitter访问类实例
2015/07/18 PHP
在WordPress中获取数据库字段内容和添加主题设置菜单
2016/01/11 PHP
PHP的全局错误处理详解
2016/04/25 PHP
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
javascript设计模式之中介者模式Mediator
2014/12/30 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
浅谈js的url解析函数封装
2016/06/28 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
2018/08/13 jQuery
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
浅谈ng-zorro使用心得
2018/12/03 Javascript
vue 左滑删除功能的示例代码
2019/01/28 Javascript
[51:10]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
用python分割TXT文件成4K的TXT文件
2009/05/23 Python
python自定义解析简单xml格式文件的方法
2015/05/11 Python
Python Requests 基础入门
2016/04/07 Python
Python判断文本中消息重复次数的方法
2016/04/27 Python
win7上python2.7连接mysql数据库的方法
2017/01/14 Python
基于python进行抽样分布描述及实践详解
2019/09/02 Python
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
New Balance俄罗斯官方网上商店:购买运动鞋
2020/03/02 全球购物
在阿联酋购买翻新手机和平板电脑:Teckzu
2021/02/12 全球购物
保洁公司服务承诺书
2014/05/28 职场文书
校园安全广播稿范文
2014/09/25 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
Python中常见的导入方式总结
2021/05/06 Python