解决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 鼠标点击事件及其它捕获
Jun 04 Javascript
jquery+json 通用三级联动下拉列表
Apr 19 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
Oct 29 Javascript
iframe的onreadystatechange事件在firefox下的使用
Apr 16 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
Sep 14 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
Jun 21 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
AngularJS学习笔记之表单验证功能实例详解
Jul 06 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 Javascript
微信小程序实现音乐播放页面布局
Dec 11 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
html读出文本文件内容
2007/01/22 Javascript
javascript 动态生成私有变量访问器
2009/12/06 Javascript
Jquery实现无刷新DropDownList联动实现代码
2010/03/08 Javascript
javascript中的undefined 与 null 的区别  补充篇
2010/03/17 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
移动端横屏的JS代码(beta)
2016/05/16 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
jquery实现input框获取焦点的简单实例
2017/01/26 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
2018/10/08 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
vue实现户籍管理系统
2020/05/29 Javascript
JavaScript前后端JSON使用方法教程
2020/11/23 Javascript
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python使用百度翻译进行中翻英示例
2014/04/14 Python
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
基于python实现微信模板消息
2015/12/21 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
Python3 读、写Excel文件的操作方法
2018/10/20 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
Python中用pyinstaller打包时的图标问题及解决方法
2020/02/17 Python
Python常用类型转换实现代码实例
2020/07/28 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
新闻专业个人求职信
2013/12/19 职场文书
秘书行业自我鉴定范文
2013/12/30 职场文书
开业庆典主持词
2014/03/21 职场文书
幼儿园教师师德师风演讲稿:爱我所爱 无悔青春
2014/09/10 职场文书
2014年技术部工作总结
2014/12/12 职场文书
各类场合主持词开场白范文集锦
2019/08/16 职场文书
Javascript中async与await的捕捉错误详解
2022/03/03 Javascript