解决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 相关文章推荐
dwr spring的集成实现代码
Mar 22 Javascript
Jquery练习之表单验证实现代码
Dec 14 Javascript
JS实现简单的顶部定时关闭层效果
Jun 15 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
Dec 08 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
Dec 24 Javascript
vuejs手把手教你写一个完整的购物车实例代码
Jul 06 Javascript
原生js实现密码强度验证功能
Mar 18 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
Jul 09 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 Javascript
Vue中computed及watch区别实例解析
Aug 01 Javascript
Vue的生命周期一起来看看
Feb 24 Vue.js
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+MYSQL的文章管理系统(一)
2006/10/09 PHP
PHP 在5.1.* 和5.2.*之间 PDO数据库操作中的不同之处小结
2012/03/07 PHP
php出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
php中chdir()函数用法实例
2014/11/13 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
解决laravel5中auth用户登录其他页面获取不到登录信息的问题
2019/10/08 PHP
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
2013/05/08 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
jquery ajax 局部刷新小案例
2014/02/08 Javascript
JavaScript函数详解
2014/11/17 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
基于javascript制作经典传统的拼图游戏
2016/03/22 Javascript
Node.js中用D3.js的方法示例
2017/01/16 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
用vue构建多页面应用的示例代码
2017/09/20 Javascript
vue视图不更新情况详解
2019/05/16 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
详解Django将秒转换为xx天xx时xx分
2019/09/27 Python
详解使用django-mama-cas快速搭建CAS服务的实现
2019/10/30 Python
使用Python实现画一个中国地图
2019/11/23 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
将keras的h5模型转换为tensorflow的pb模型操作
2020/05/25 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
python 实现aes256加密
2020/11/27 Python
HTML5新增加标签和功能概述
2016/09/05 HTML / CSS
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
读书活动总结范文
2014/04/26 职场文书
同意落户证明
2015/06/19 职场文书
安全守法证明
2015/06/23 职场文书
Python中相见恨晚的技巧
2021/04/13 Python
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS
docker-compose部署Yapi的方法
2022/04/08 Servers
instantclient客户端 连接oracle数据库
2022/04/26 Oracle