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 获取用户客户端操作系统版本
Aug 25 Javascript
图片img的src不变让浏览器重新加载实现方法
Mar 29 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
Apr 01 Javascript
js验证是否为数字的总结
Apr 14 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
JavaScript获取网页支持表单字符集的方法
Apr 02 Javascript
FullCalendar日历插件应用之数据展现(一)
Dec 23 Javascript
基于socket.io+express实现多房间聊天
Mar 17 Javascript
echart简介_动力节点Java学院整理
Aug 11 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 Javascript
vue中的过滤器实例代码详解
Jun 06 Javascript
vue 中 命名视图的用法实例详解
Aug 14 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令牌 Token改进版
2008/07/18 PHP
PHP中SESSION使用中的一点经验总结
2012/03/30 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
JS实现图片预加载无需等待
2012/12/21 Javascript
jQuery实现倒计时按钮功能代码分享
2014/09/03 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
JavaScript函数中关于valueOf和toString的理解
2016/06/14 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
2017/04/04 jQuery
Swiper实现轮播图效果
2017/07/03 Javascript
vue打包相关细节整理(小结)
2018/09/28 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
pandas pivot_table() 按日期分多列数据的方法
2018/11/16 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
详解Python3注释知识点
2019/02/19 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
Django自定义全局403、404、500错误页面的示例代码
2020/03/08 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
智能钱包:Ekster
2019/11/21 全球购物
大学生暑期实践感言
2014/02/26 职场文书
参观接待方案
2014/03/17 职场文书
励志演讲稿200字
2014/08/21 职场文书
初中思品教学反思
2016/02/20 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers