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学习阶段性总结(2)--(X)HTML学习
Feb 03 Javascript
很棒的学习jQuery的12个网站推荐
Apr 28 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
Jul 09 Javascript
js拼接html注意问题示例探讨
Jul 14 Javascript
Angularjs的Controller间通信机制实例分析
Nov 07 Javascript
详解vue-router基本使用
Apr 18 Javascript
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
Vue刷新修改页面中数据的方法
Sep 16 Javascript
使用Javascript简单计算器
Nov 17 Javascript
微信小程序云开发之使用云存储
May 17 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
Sep 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
php adodb操作mysql数据库
2009/03/19 PHP
php多重接口的实现方法
2015/06/20 PHP
自定义Laravel (monolog)日志位置,并增加请求ID的实现
2019/10/17 PHP
PHP 图片处理
2020/09/16 PHP
Prototype Array对象 学习
2009/07/19 Javascript
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
2016/03/11 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
基于Vue实现图书管理功能
2017/10/17 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
JavaScript中Array方法你该知道的正确打开方法
2018/09/11 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
2019/05/01 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
Vue使用NProgress进度条的方法
2019/09/21 Javascript
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
单利模式及python实现方式详解
2018/03/20 Python
python让列表倒序输出的实例
2018/06/25 Python
Django密码存储策略分析
2020/01/09 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
Internet体系结构
2014/12/21 面试题
电子商务专业毕业生工作推荐信
2013/11/17 职场文书
应聘会计求职信
2014/06/11 职场文书
学校感恩节活动策划方案
2014/10/06 职场文书
2014年检验科工作总结
2014/11/22 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
学校社团活动总结
2015/05/07 职场文书
工作收入证明模板
2015/06/12 职场文书
统招统分证明
2015/06/23 职场文书
vue3中的组件间通信
2021/03/31 Vue.js