Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))


Posted in Javascript onOctober 28, 2019

原始 HTML(Raw HTML)

双花括号语法,会将数据中的 HTML 转为纯文本后再进行插值。为了输出真正的 HTML,你需要使用 v-html 指令:

<p>使用双花括号语法:{{ rawHtml }}</p>
<p>使用 v-html 指令:<span v-html="rawHtml"></span></p>

使用双花括号语法:<span style="color: red">This should be red.</span>

使用 v-html 指令:This should be red.

span 中的内容,将会被替换为 rawHtml 属性的值,并且作为原始 HTML 插入 - 会忽略解析属性值中的数据绑定。请注意,无法使用v-html来组合局部模板,这是因为 Vue 不是基于字符串(string-based)的模板引擎。反之,对于用户界面(UI),组件更适合作为可重用和可组合的基本单位。

在网站中动态渲染任意的 HTML 是非常危险的,因为这很容易导致网站受到 XSS 攻击。请只对可信内容使用 HTML 插值,绝对不要对用户提供的内容使用 HTML 插值。

以上这篇Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript URL锚点取值方法
Feb 25 Javascript
jQuery get和post 方法传值注意事项
Nov 03 Javascript
jQuery之浮动窗口实现代码(两种方法)
Sep 08 Javascript
计算新浪Weibo消息长度(还可以输入119字)
Jul 02 Javascript
浅谈Jquery核心函数
Jun 18 Javascript
JavaScript中获取Radio被选中的值
Nov 11 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
ES6 Promise对象概念及用法实例详解
Oct 15 Javascript
微信小程序实现左侧滑动导航栏
Apr 08 Javascript
Angular value与ngValue区别详解
Nov 27 Javascript
基于javascript的无缝滚动动画实现2
Aug 07 Javascript
js实现图片无缝循环轮播
Oct 28 #Javascript
Vue 实现html中根据类型显示内容
Oct 28 #Javascript
vue中动态select的使用方法示例
Oct 28 #Javascript
js实现坦克移动小游戏
Oct 28 #Javascript
vue 实现走马灯效果
Oct 28 #Javascript
JS实现json数组排序操作实例分析
Oct 28 #Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 #Javascript
You might like
用PHP的ob_start();控制您的浏览器cache!
2007/02/14 PHP
体育彩票排列三组选三算法分享
2014/03/07 PHP
PHP抓取网页、解析HTML常用的方法总结
2015/07/01 PHP
PHP处理bmp格式图片的方法分析
2017/07/04 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
基于Jquery实现表格动态分页实现代码
2011/06/21 Javascript
Javascript开发之三数组对象实例介绍
2012/11/12 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
删除javascript中注释语句的正则表达式
2014/06/11 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
javascript中setInterval的用法
2015/07/19 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
2015/12/07 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
2016/08/24 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
layui树形菜单动态遍历的例子
2019/09/23 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
vue实现div单选多选功能
2020/07/16 Javascript
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
python递归函数绘制分形树的方法
2018/06/22 Python
利用Python实现微信找房机器人实例教程
2019/03/10 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
Django rest framework jwt的使用方法详解
2019/08/08 Python
基于 HTML5 WebGL 实现的垃圾分类系统
2019/10/08 HTML / CSS
人力资源管理毕业生自荐信
2013/11/21 职场文书
党员自我批评与反省材料
2014/02/10 职场文书
经典团队口号大全
2014/06/21 职场文书
六一儿童节活动总结
2014/08/27 职场文书
地道战观后感500字
2015/06/04 职场文书
小学生读书笔记
2015/07/01 职场文书
golang连接MySQl使用sqlx库
2022/04/14 Golang
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers