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 相关文章推荐
中文字符串截取的js函数代码
Apr 17 Javascript
jQuery的each终止或跳过示例代码
Dec 12 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
Jun 23 Javascript
jQuery中removeClass()方法用法实例
Jan 05 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
jQuery实现弹出窗口中切换登录与注册表单
Jun 05 Javascript
探索angularjs+requirejs全面实现按需加载的套路
Feb 26 Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
Mar 14 Javascript
vue-cli中的webpack配置详解
Sep 25 Javascript
js判断输入框不能为空格或null值的实现方法
Mar 02 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 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
判断Keep-Alive模式的HTTP请求的结束的实现代码
2011/08/06 PHP
PHP 登录记住密码实现思路
2013/05/07 PHP
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
一个获取第n个元素节点的js函数
2014/09/02 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
Jquery $when done then的用法详解
2016/05/20 Javascript
AngularJS基础 ng-keydown 指令简单示例
2016/08/02 Javascript
浅谈js中的三种继承方式及其优缺点
2016/08/10 Javascript
JavaScript中的await/async的作用和用法
2016/10/31 Javascript
JavaScript之Vue.js【入门基础】
2016/12/06 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
[01:12]DOTA2 2015年秋季互动指南
2015/11/10 DOTA
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
Windows下搭建python开发环境详细步骤
2020/07/20 Python
Python实现SSH远程登陆,并执行命令的方法(分享)
2017/05/08 Python
Python 查找字符在字符串中的位置实例
2018/05/02 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
python pymysql库的常用操作
2020/10/16 Python
纯CSS绘制漂亮的圆形图案效果
2014/05/07 HTML / CSS
PyQt QMainWindow的使用示例
2021/03/24 Python
安全生产检讨书
2014/01/21 职场文书
测试工程师职业规划书
2014/02/06 职场文书
抗震救灾标语
2014/06/26 职场文书
骆驼祥子读书笔记
2015/06/26 职场文书
pycharm 如何查看某一函数源码的快捷键
2021/05/12 Python