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 相关文章推荐
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
Nov 04 Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
jquery+javascript编写国籍控件
Feb 12 Javascript
JS实现点击按钮后框架内载入不同网页的方法
May 05 Javascript
easyui validatebox验证
Apr 29 Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
Dec 08 Javascript
JavaScript生成指定范围的时间列表
Mar 19 Javascript
最后说说Vue2 SSR 的 Cookies 问题
May 25 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
Jul 10 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
Apr 09 Javascript
JavaScript实现H5接金币功能(实例代码)
Feb 22 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获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
自己动手制作jquery插件之自动添加删除行功能介绍
2011/10/14 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
2015/03/31 Javascript
jQuery提示插件alertify使用指南
2015/04/21 Javascript
jquery中$each()方法的使用指南
2015/04/30 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
2015/08/25 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
基于Bootstrap实现tab标签切换效果
2020/04/15 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
Angularjs添加排序查询功能的实例代码
2017/10/24 Javascript
对vue下点击事件传参和不传参的区别详解
2018/09/15 Javascript
vue2.0 如何在hash模式下实现微信分享
2019/01/22 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
JS多个异步请求 按顺序执行next实现解析
2019/09/16 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
vue使用screenfull插件实现全屏功能
2020/09/17 Javascript
[02:01]2018完美盛典-开场舞《双子星》
2018/12/16 DOTA
python实现在pickling的时候压缩的方法
2014/09/25 Python
Python中用PIL库批量给图片加上序号的教程
2015/05/06 Python
结合Python的SimpleHTTPServer源码来解析socket通信
2016/06/27 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
Linux管理员面试经常问道的相关命令
2013/04/29 面试题
岗位竞聘演讲稿
2014/01/10 职场文书
文明学生事迹材料
2014/01/29 职场文书
齐云山导游词
2015/02/06 职场文书
索赔员岗位职责
2015/02/15 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
结婚仪式主持词
2015/06/29 职场文书
redis protocol通信协议及使用详解
2022/07/15 Redis
Nginx报404错误的详细解决方法
2022/07/23 Servers