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实现用方向键控制层的上下左右移动
Jan 13 Javascript
jquery中EasyUI使用技巧小结
Feb 10 Javascript
javascript版2048小游戏
Mar 18 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
Apr 30 Javascript
jquery获取url参数及url加参数的方法
Oct 26 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
Jun 28 Javascript
jquery uploadify隐藏上传进度的实现方法
Feb 06 Javascript
jQuery实现三级联动效果
Mar 02 Javascript
ES6新数据结构Map功能与用法示例
Mar 31 Javascript
微信小程序实现选择地址省市区三级联动
Jun 21 Javascript
vue中使用echarts的示例
Jan 03 Vue.js
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 static局部静态变量和全局静态变量总结
2014/03/02 PHP
php实现搜索类封装示例
2016/03/31 PHP
PHP编写的图片验证码类文件分享
2016/06/06 PHP
PHP编程实现脚本异步执行的方法
2017/08/09 PHP
PHP下用Swoole实现Actor并发模型的方法
2019/06/12 PHP
javascript中的location用法简单介绍
2007/03/07 Javascript
SWFObject Flash js调用类
2008/07/08 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
2013/03/19 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
Vue下的国际化处理方法
2017/12/18 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
[01:06:39]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第三局
2016/03/02 DOTA
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
Python实现的归并排序算法示例
2017/11/21 Python
pandas带有重复索引操作方法
2018/06/08 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
Python Celery多队列配置代码实例
2019/11/22 Python
python实现七段数码管和倒计时效果
2019/11/23 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
《守株待兔》教学反思
2014/03/01 职场文书
电焊工岗位职责
2014/03/06 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
先进班组事迹材料
2014/12/25 职场文书
子女赡养老人协议书
2016/03/23 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers