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 三种不同位置代码的写法
Oct 25 Javascript
javascript开发技术大全-第1章javascript概述
Jul 03 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
Oct 03 Javascript
Node.js实战 建立简单的Web服务器
Mar 08 Javascript
谈谈JavaScript中的函数与闭包
Apr 14 Javascript
javascript函数重载解决方案分享
Feb 19 Javascript
javascript实现动态改变层大小的方法
May 14 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
JS装饰器函数用法总结
Apr 21 Javascript
详解Angular6学习笔记之主从组件
Sep 05 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
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
操作Oracle的php类
2006/10/09 PHP
PHP的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
php利用事务处理转账问题
2015/04/22 PHP
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
js 省地市级联选择
2010/02/07 Javascript
JS图片无缝滚动(简单利于使用)
2013/06/17 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
几种响应式文字详解
2017/05/19 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
nodejs简单实现TCP服务器端和客户端的聊天功能示例
2018/01/04 NodeJs
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python格式化css文件的方法
2015/03/10 Python
Python实现图像几何变换
2015/07/06 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
在python中安装basemap的教程
2018/09/20 Python
Python3从零开始搭建一个语音对话机器人的实现
2019/08/23 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
执行Python程序时模块报错问题
2020/03/26 Python
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
教育专业个人求职信
2013/12/02 职场文书
2014全国两会大学生学习心得体会
2014/03/10 职场文书
仓库规划计划书
2014/04/28 职场文书
科技活动周标语
2014/10/08 职场文书
2015年幼儿教育工作总结
2015/07/24 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
2019入党申请书范文3篇
2019/08/21 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL
SpringBoot使用ip2region获取地理位置信息的方法
2022/06/21 Java/Android