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 相关文章推荐
jquery遍历checkbox介绍
Feb 21 Javascript
如何用jquery控制表格奇偶行及活动行颜色
Apr 20 Javascript
基于javascript的COOkie的操作实现只能点一次
Dec 26 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
Oct 30 Javascript
js微信扫描二维码登录网站技术原理
Dec 01 Javascript
信息滚动效果的实例讲解
Sep 18 Javascript
Vue中对拿到的数据进行A-Z排序的实例
Sep 25 Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 Javascript
VUE引入第三方js包及调用方法讲解
Mar 01 Javascript
Vue如何获取数据列表展示
Dec 11 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
Feb 24 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 Undefined index和Undefined variable的解决方法
2008/03/27 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
PHP编程计算文件或数组中单词出现频率的方法
2017/05/22 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
2007/02/09 Javascript
关于文本限制字数的js代码
2007/04/02 Javascript
JavaScript 对象成员的可见性说明
2009/10/16 Javascript
基于jquery的返回顶部效果(兼容IE6)
2011/01/17 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
bootstrap table 服务器端分页例子分享
2015/02/10 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
Three.js快速入门教程
2016/09/09 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
浅谈Vue组件及组件的注册方法
2018/08/24 Javascript
webpack 开发和生产并行设置的方法
2018/11/08 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
javascript实现时钟动画
2020/12/03 Javascript
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
openCV提取图像中的矩形区域
2020/07/21 Python
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
如何撰写一封出色的求职信
2014/04/27 职场文书
党员自我剖析材料
2014/08/31 职场文书
铅球加油稿100字
2014/09/26 职场文书
初三毕业感言
2015/07/31 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书
导游词之宿迁乾隆行宫
2019/10/15 职场文书