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 相关文章推荐
js jquery做的图片连续滚动代码
Jan 06 Javascript
web 页面分页打印的实现
Jun 22 Javascript
jQuery 添加/移除CSS类实现代码
Feb 11 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
Dec 12 Javascript
js解析与序列化json数据(三)json的解析探讨
Feb 01 Javascript
jQuery获取样式中颜色值的方法
Jan 29 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
Dec 06 Javascript
json的使用小结
Jun 08 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
jQuery自定义组件(导入组件)
Nov 08 Javascript
React SSR样式及SEO的实践
Oct 22 Javascript
Node.js中出现未捕获异常的处理方法
Jun 29 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
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
php 生成随机验证码图片代码
2010/02/08 PHP
PHP中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
关于Yii中模型场景的一些简单介绍
2019/09/22 PHP
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
使用JQuery进行跨域请求
2010/01/25 Javascript
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
JS中getYear()和getFullYear()区别分析
2014/07/04 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
浅谈ECMAScript 中的Array类型
2019/06/10 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
Python类方法__init__和__del__构造、析构过程分析
2015/03/06 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
猫咪家具:CatsPlay
2018/11/03 全球购物
Turnbull & Asser官网:英国皇室御用的顶级定制衬衫
2019/01/31 全球购物
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
世界上最大的字体市场:MyFonts
2020/01/10 全球购物
大专毕业自我鉴定
2014/02/04 职场文书
集体生日活动方案
2014/08/18 职场文书
红领巾广播站广播稿
2014/10/19 职场文书
Python Django获取URL中的数据详解
2021/11/01 Python
CentOS MySql8 远程连接实战
2022/04/19 MySQL