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左侧多级菜单动态的解决方案
Feb 01 Javascript
javascript/jquery获取地址栏url参数的方法
Mar 05 Javascript
jquery实现的一个简单进度条效果实例
May 12 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
Nov 17 Javascript
js改变透明度实现轮播图的算法
Aug 24 Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
Sep 20 Javascript
Vue原理剖析 实现双向绑定MVVM
May 03 Javascript
vue实现全选、反选功能
Nov 17 Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
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分页函数
2006/07/08 PHP
使用PHP制作新闻系统的思路
2006/10/09 PHP
php实现专业获取网站SEO信息类实例
2015/04/02 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
checkbox 复选框不能为空
2009/07/11 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
WEB前端设计师常用工具集锦
2014/12/09 Javascript
ECMAScript5(ES5)中bind方法使用小结
2015/05/07 Javascript
Javascript动态创建表格及删除行列的方法
2015/05/15 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
python中正则表达式 re.findall 用法
2018/10/23 Python
pycharm运行程序时在Python console窗口中运行的方法
2018/12/03 Python
python调用webservice接口的实现
2019/07/12 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
解决Keras TensorFlow 混编中 trainable=False设置无效问题
2020/06/28 Python
python利用opencv实现颜色检测
2021/02/23 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
德国婴儿服装和婴儿用品购买网站:Baby Sweets
2019/12/08 全球购物
电钳专业个人求职信
2014/01/04 职场文书
音乐教学反思
2014/02/02 职场文书
小区消防演习方案
2014/02/21 职场文书
电台编导求职信
2014/05/06 职场文书
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python
Java实现学生管理系统(IO版)
2022/02/24 Java/Android