用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函数
Aug 01 Javascript
关于js类的定义
Jun 28 Javascript
JavaScript中的面向对象介绍
Jun 30 Javascript
用js实现in_array的方法
Nov 05 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
Jan 24 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
Sep 03 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
Jan 27 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
Jul 02 Javascript
axios发送post请求springMVC接收不到参数的解决方法
Mar 05 Javascript
JS实现的缓冲运动效果示例
Apr 30 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
Jul 04 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
PHP个人网站架设连环讲(三)
2006/10/09 PHP
php中is_null,empty,isset,unset 的区别详细介绍
2013/04/28 PHP
不使用php api函数实现数组的交换排序示例
2014/04/13 PHP
支持png透明图片的php生成缩略图类分享
2015/02/08 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
AngularJS  $on、$emit和$broadcast的使用
2016/09/05 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
vue.js初学入门教程(1)
2016/11/03 Javascript
js Canvas绘制圆形时钟效果
2017/02/17 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
python实现的重启关机程序实例
2014/08/21 Python
Python进阶_关于命名空间与作用域(详解)
2017/05/29 Python
Pandas GroupBy对象 索引与迭代方法
2018/11/16 Python
使用python PIL库实现简单验证码的去噪方法步骤
2019/05/10 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
深入浅析Python 命令行模块 Click
2020/03/11 Python
NBA欧洲商店(西班牙):NBA Europe Store ES
2019/04/16 全球购物
大学辅导员事迹材料
2014/02/05 职场文书
保护动物的标语
2014/06/11 职场文书
社区党员志愿服务活动方案
2014/08/18 职场文书
财务检查整改报告
2014/11/06 职场文书
转让协议书
2015/01/27 职场文书
银行资信证明
2015/06/17 职场文书
法人代表证明书范本
2015/06/18 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
CSS基础详解
2021/10/16 HTML / CSS