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系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
复选框全选与全不选操作实现思路
Aug 18 Javascript
js中的referrer返回上一页使用介绍
Sep 26 Javascript
javascript上传图片前预览图片兼容大多数浏览器
Oct 25 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
smartcrop.js智能图片裁剪库
Oct 14 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
May 30 Javascript
微信小程序  简单实例(阅读器)的实例开发
Sep 29 Javascript
vue.js实现含搜索的多种复选框(附源码)
Mar 23 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
May 02 Javascript
微信小程序Redux绑定实例详解
Jun 07 Javascript
微信小程序抽奖组件的使用步骤
Jan 11 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版(3)
2006/10/09 PHP
php实例分享之html转为rtf格式
2014/06/02 PHP
thinkPHP简单实现多个子查询语句的方法
2016/12/05 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
2010/05/25 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
学习并汇集javascript匿名函数
2010/11/25 Javascript
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
JavaScript中Cookies的相关使用教程
2015/06/04 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
2016/12/27 Javascript
自定义事件解决重复请求BUG的问题
2017/07/11 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
深入源码解析Python中的对象与类型
2015/12/11 Python
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
python实现LRU热点缓存及原理
2019/10/29 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
美国户外服装和装备购物网站:Outland USA
2020/03/22 全球购物
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
如何利用cmp命令比较文件
2013/09/23 面试题
学生发电厂实习自我鉴定
2013/09/22 职场文书
区域销售经理岗位职责
2013/12/10 职场文书
应届生如何写自荐信
2014/01/05 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书
运动会广播稿200字(10篇)
2014/10/12 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS