用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 相关文章推荐
jQuery dialog 异步调用ashx,webservice数据的代码
Aug 03 Javascript
PHP 与 js的通信(via ajax,json)
Nov 16 Javascript
谈谈关于JavaScript 中的 MVC 模式
Apr 11 Javascript
Javascript对象属性方法汇总
Nov 21 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
JS使用eval()动态创建变量的方法
Jun 03 Javascript
JS定时器用法分析【时钟与菜单中的应用】
Dec 21 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
vue实现的双向数据绑定操作示例
Dec 04 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
关于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生成html分页列表的代码
2007/03/18 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
php实现在多维数组中查找特定value的方法
2015/07/29 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
CI框架附属类用法分析
2018/12/26 PHP
Using the TextRange Object
2006/10/14 Javascript
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
2013/06/25 Javascript
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
NodeJS制作爬虫全过程(续)
2014/12/22 NodeJs
node.js操作mysql(增删改查)
2015/07/24 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
js实现简单的手风琴效果
2017/02/27 Javascript
Bootstrap警告框(Alert)插件使用方法
2017/03/21 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
react-native android状态栏的实现
2018/06/15 Javascript
vue实现分页组件
2020/06/16 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
Python matplotlib绘图可视化知识点整理(小结)
2018/03/16 Python
django-csrf使用和禁用方式
2020/03/13 Python
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
九月份红领巾广播稿
2014/01/22 职场文书
初中军训感想300字
2014/03/05 职场文书
团日活动总结范文
2014/04/25 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
教师群众路线心得体会
2014/11/04 职场文书
会计稽核岗位职责
2015/04/13 职场文书
nginx+lua单机上万并发的实现
2021/05/31 Servers
python中pycryto实现数据加密
2022/04/29 Python