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正确获取元素样式详解
Aug 07 Javascript
JS对HTML标签select的获取、添加、删除操作
Oct 17 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
详解Bootstrap创建表单的三种格式(一)
Jan 04 Javascript
JS Ajax请求如何防止重复提交
Jun 13 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
Sep 01 Javascript
详解AngularJS跨页面传值(ui-router)
Aug 23 Javascript
JS实现留言板功能[楼层效果展示]
Dec 27 Javascript
微信小程序时间轴实现方法示例
Jan 14 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
原生js实现日期选择插件
May 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,ajax实现分页
2008/03/27 PHP
一步一步学习PHP(3) php 函数
2010/02/15 PHP
PHP mail()函数使用及配置方法
2014/01/14 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
2018/09/05 PHP
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
2012/06/22 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
2016/06/09 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
2019/06/18 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
vue中渲染对象中属性时显示未定义的解决
2020/07/31 Javascript
Python描述器descriptor详解
2015/02/03 Python
Python中列表和元组的使用方法和区别详解
2020/12/30 Python
Python 性能优化技巧总结
2016/11/01 Python
Python变量和字符串详解
2017/04/29 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
Python比较配置文件的方法实例详解
2019/06/06 Python
详解Python中打乱列表顺序random.shuffle()的使用方法
2019/11/11 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
pytorch 中的重要模块化接口nn.Module的使用
2020/04/02 Python
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
2014年仓库管理员工作总结
2014/11/18 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
开除通知书范本
2015/04/25 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书
七一晚会主持词
2015/06/29 职场文书
《画家和牧童》教学反思
2016/02/17 职场文书
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技