解决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 相关文章推荐
学习js所必须要知道的一些
Mar 07 Javascript
jquery的$(document).ready()和onload的加载顺序
May 26 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
Sep 28 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
Dec 20 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
Jan 27 Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
Nov 20 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 Javascript
浅谈关于vue中scss公用的解决方案
Dec 02 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书写安全的脚本代码
2012/02/05 PHP
php set_time_limit()函数的使用详解
2013/06/05 PHP
php加密解密实用类分享
2014/01/07 PHP
PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法
2016/05/13 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
js比较和逻辑运算符的介绍
2013/03/10 Javascript
jquery click([data],fn)使用方法实例介绍
2013/07/08 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
JavaScript中具名函数的多种调用方式总结
2014/11/08 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
jquery-mobile基础属性与用法详解
2016/11/23 Javascript
js实现消息滚动效果
2017/01/18 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
JavaScript 五大常见函数
2018/03/23 Javascript
详解Vue打包优化之code spliting
2018/04/09 Javascript
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
d3.js实现图形缩放平移
2019/12/19 Javascript
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
Python设计模式之门面模式简单示例
2018/01/09 Python
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
详解Python给照片换底色(蓝底换红底)
2019/03/22 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
用C语言实现文件读写操作
2013/10/27 面试题
2014年国庆节活动总结
2014/08/26 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
销售内勤岗位职责范本
2015/04/13 职场文书
学习党章心得体会2016
2016/01/15 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书
Nginx如何限制IP访问只允许特定域名访问
2022/07/23 Servers