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 相关文章推荐
让任务管理器中的CPU跳舞的js代码
Nov 01 Javascript
js 日期转换成中文格式的函数
Jul 07 Javascript
Jquery 数组操作大全个人总结
Nov 13 Javascript
JSON+HTML实现国家省市联动选择效果
May 18 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 Javascript
JS实现的4种数字千位符格式化方法分享
Mar 02 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
vue.js评论发布信息可插入QQ表情功能
Aug 08 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
React Native 混合开发多入口加载方式详解
Sep 23 Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 Javascript
Vue ECharts实现机舱座位选择展示功能
May 15 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无限级栏目分类读取的实现代码
2014/02/19 PHP
PHP中鲜为人知的10个函数
2014/02/28 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
php微信公众号开发之图片回复
2018/10/20 PHP
PHP getNamespaces()函数讲解
2019/02/03 PHP
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
ext中store.load跟store.reload的区别示例介绍
2014/06/17 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
使用ES6语法重构React代码详解
2017/05/09 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
vue前后分离调起微信支付
2019/07/29 Javascript
JavaScript实现电灯开关小案例
2020/03/30 Javascript
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
Python中分数的相关使用教程
2015/03/30 Python
在Python下进行UDP网络编程的教程
2015/04/29 Python
Django 使用Ajax进行前后台交互的示例讲解
2018/05/28 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
selenium+Chrome滑动验证码破解二(某某网站)
2019/12/17 Python
Python PyInstaller安装和使用教程详解
2020/01/08 Python
Docker部署Python爬虫项目的方法步骤
2020/01/19 Python
高中军训感言500字
2014/02/24 职场文书
应急管理培训方案
2014/06/12 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书
创业计划书之零食店(进口)
2019/09/24 职场文书
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android
《王者天下》第4季首话新剧照 4月9日正式开播
2022/04/07 日漫