Vue解析带html标签的字符串为dom的实例


Posted in Javascript onNovember 13, 2019

1.场景描述

Vue解析带html标签的字符串为dom的实例

如上接口中,content字段:

content:"<p>这是内容</p>"

需要在网页中现实如下效果:

Vue解析带html标签的字符串为dom的实例

2.解决方法

v-html

<div class="blog-content" v-html="curblog.content">
</div>

v-html可以操作元素中的HTML标签,效果类似于jquery里的 .html()方法,在不安全的页面比如注册或者登陆页面千万不要用这个指令。因为会出现XSS攻击。所以千万不要用。官网提示:

在不安全的页面比如注册或者登陆页面千万不要用这个指令。因为会出现 XSS攻击。所以千万不要用。

以上这篇Vue解析带html标签的字符串为dom的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何在Web页面上直接打开、编辑、创建Office文档
Mar 12 Javascript
Google韩国首页图标动画效果
Aug 26 Javascript
jQuery find和children方法使用
Jan 31 Javascript
jQuery控制图片的hover效果(smartRollover.js)
Mar 18 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
May 14 Javascript
node.js中的fs.lchmod方法使用说明
Dec 16 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
Feb 03 Javascript
js中substring和substr两者区别和使用方法
Nov 09 Javascript
Ext JS 实现建议词模糊动态搜索功能
May 13 Javascript
解决vue项目使用font-awesome,build后路径的问题
Sep 01 Javascript
vue-router结合vuex实现用户权限控制功能
Nov 14 Javascript
js实现验证码功能
Jul 24 Javascript
vue props对象validator自定义函数实例
Nov 13 #Javascript
微信小程序获取当前位置和城市名
Nov 13 #Javascript
使用Promise封装小程序wx.request的实现方法
Nov 13 #Javascript
微信小程序wx.request的简单封装
Nov 13 #Javascript
vue使用prop可以渲染但是打印台报错的解决方式
Nov 13 #Javascript
highcharts.js数据绑定方式代码实例
Nov 13 #Javascript
vue prop属性传值与传引用示例
Nov 13 #Javascript
You might like
PHP企业级应用之常见缓存技术篇
2011/01/27 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
js 目录列举函数
2008/11/06 Javascript
javascript对象之内置对象Math使用方法
2010/04/16 Javascript
js中的前绑定和后绑定详解
2013/08/01 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
在React框架中实现一些AngularJS中ng指令的例子
2016/03/06 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
2016/11/09 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
Bootstrap栅格系统的使用详解
2017/10/30 Javascript
JavaScript实现左侧菜单效果
2017/12/14 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
微信小程序个人中心的列表控件实现代码
2020/04/26 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
python 定时修改数据库的示例代码
2018/04/08 Python
结合OpenCV与TensorFlow进行人脸识别的实现
2019/10/10 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
Python3-异步进程回调函数(callback())介绍
2020/05/02 Python
pytorch 常用函数 max ,eq说明
2020/06/28 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
中间件分为哪几类
2016/09/18 面试题
JSF界面控制层技术
2013/06/17 面试题
对标管理实施方案
2014/03/12 职场文书
遵纪守法演讲稿
2014/05/23 职场文书
网上祭英烈活动总结
2015/02/04 职场文书
2015年十月一日放假通知
2015/08/18 职场文书
2016年大学生党员公开承诺书
2016/03/24 职场文书
详解运行Python的神器Jupyter Notebook
2021/06/03 Python
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript