用v-html解决Vue.js渲染中html标签不被解析的问题


Posted in Javascript onDecember 14, 2016

前言

最近在工作中遇到一个问题,在网页中后台传来的json数据中包含html标签,将该json数据绑定到Vue.js中对象中,对该对象进行for循环,发现数据中的html标签不能被解析,而是当作字符显示出来。

问题如下所示:

用v-html解决Vue.js渲染中html标签不被解析的问题

解决方法:

Vue.js中提供了v-html这个指令来解决这个问题,或者对数据对象使用{{{vm.data}}}三个大括号来包裹对象,就可以正常解析了。

代码改动如下:

用v-html解决Vue.js渲染中html标签不被解析的问题

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家都 学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
优化JavaScript脚本的性能的几个注意事项
Dec 22 Javascript
Javascript 面向对象编程(一) 封装
Aug 28 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 Javascript
JavaScript实现自动变换表格边框颜色
May 08 Javascript
基于BootStarp的Dailog
Apr 28 Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 Javascript
微信公众号 摇一摇周边功能开发
Dec 08 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 #Javascript
实例解析angularjs的filter过滤器
Dec 14 #Javascript
微信小程序 input输入框控件详解及实例(多种示例)
Dec 14 #Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
Dec 14 #Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
Dec 14 #Javascript
javascript中的try catch异常捕获机制用法分析
Dec 14 #Javascript
微信小程序 scroll-view组件实现列表页实例代码
Dec 14 #Javascript
You might like
支持oicq头像的留言簿(一)
2006/10/09 PHP
PHP学习之字符串比较和查找
2011/04/17 PHP
php获取根域名方法汇总
2014/10/28 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
javaScript中的this示例学习详解及工作原理
2014/01/13 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
2017/11/09 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
angular4中引入echarts的方法示例
2019/01/29 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
pycharm 使用心得(六)进行简单的数据库管理
2014/06/06 Python
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
Python PyQt5标准对话框用法示例
2017/08/23 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
使用python获取(宜宾市地震信息)地震信息
2019/06/20 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
python的reverse函数翻转结果为None的问题
2020/05/11 Python
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
教师研修随笔感言
2014/01/23 职场文书
DIY手工制作经营店创业计划书
2014/02/01 职场文书
旅游与酒店管理专业求职信
2014/07/21 职场文书
我的梦想演讲稿1000字
2014/08/21 职场文书
2015年科研工作总结范文
2015/05/13 职场文书
《乌鸦喝水》教学反思
2016/02/19 职场文书
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python
Windows server 2012 配置Telnet以及用法详解
2022/04/28 Servers
ant design vue的form表单取值方法
2022/06/01 Vue.js