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插件的写法分享
Jun 12 Javascript
jQuery模拟新浪微博首页滚动效果的方法
Mar 11 Javascript
JavaScript控制table某列不显示的方法
Mar 16 Javascript
jquery分割字符串的方法
Jun 24 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 Javascript
探讨跨域请求资源的几种方式(总结)
Dec 02 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
Node.js使用Angular简单示例
May 11 Javascript
vue2.0 实现导航守卫(路由守卫)
May 21 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
May 22 Javascript
记录vue做微信自定义分享的一些问题
Sep 12 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 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
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
深入PHP运行环境配置的详解
2013/06/04 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
2013/01/18 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
javascript二维数组转置实例
2015/01/22 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
Easyui ueditor 整合解决不能编辑的问题(推荐)
2017/06/25 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
2018/03/09 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
[02:12]打造更好的电竞完美世界:完美盛典回顾篇
2018/12/19 DOTA
详解Python中time()方法的使用的教程
2015/05/22 Python
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
Python多线程编程之多线程加锁操作示例
2018/09/06 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
python3 pathlib库Path类方法总结
2019/12/26 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
python3爬虫中多线程进行解锁操作实例
2020/11/25 Python
selenium判断元素是否存在的两种方法小结
2020/12/07 Python
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
《她是我的朋友》教学反思
2014/04/26 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
医学会议开幕词
2016/03/03 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书
详解JavaScript中Arguments对象用途
2021/08/30 Javascript