解决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 相关文章推荐
腾讯的ip接口 方便获取当前用户的ip地理位置
Nov 25 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
Sep 06 Javascript
jquery $.each()使用探讨
Sep 23 Javascript
实现动画效果核心方式的js代码
Sep 27 Javascript
JS的参数传递示例介绍
Feb 08 Javascript
基于javascript实现checkbox复选框实例代码
Jan 28 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
angularjs 缓存的使用详解
Mar 19 Javascript
vue2中使用less简易教程
Mar 27 Javascript
对类Vue的MVVM前端库的实现代码
Sep 07 Javascript
vue服务端渲染操作简单入门实例分析
Aug 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 多行多列显示
2009/08/15 PHP
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
php类声明和php类使用方法示例分享
2014/03/29 PHP
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
2014/02/11 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
jQuery插件jquery-barcode实现条码打印的方法
2015/11/25 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
Vue.js之slot深度复制详解
2017/03/10 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
Vue项目环境搭建详细总结
2019/09/26 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
2020/11/06 Javascript
[02:15]2015国际邀请赛选手档案IG.Ferrari 430
2015/07/30 DOTA
[05:06]DOTA2-DPC中国联赛 正赛 VG vs Magma选手采访
2021/03/11 DOTA
Python 专题三 字符串的基础知识
2017/03/19 Python
Python模块搜索路径代码详解
2018/01/29 Python
PyTorch实现AlexNet示例
2020/01/14 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
Django model.py表单设置默认值允许为空的操作
2020/05/19 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
建筑安全责任书范本
2014/07/24 职场文书
捐款感谢信
2015/01/20 职场文书
go:垃圾回收GC触发条件详解
2021/04/24 Golang
浅谈Python数学建模之线性规划
2021/06/23 Python
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python
win sever 2022如何占用操作主机角色
2022/06/25 Servers