Vue 将数据库中带html标签的内容输出 (原始 HTML(Raw HTML))

news/2024/7/10 1:45:20 标签: vue

原始 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 插值。


http://www.niftyadmin.cn/n/1395072.html

相关文章

PHP面试题总结

概念篇 协议部分 1. TCP/UDP区别 TCP TCP是一种面向连接的、可靠的、基于字节流的传输层通信协议TCP面向连接&#xff0c;提供可靠地数据服务TCP首部开销20字节TCP逻辑通信信道是全双工的可靠信道TCP连接只能是点到点的 UDP UDP是参考模型中一种无连接的传输层协议&#…

编程基本功(一)

【题目一】编写一个程序&#xff0c;在终端输入一个字符&#xff0c;输出它的的ASCII码 1: public class ToAsc 2: { 3: public static void main(String[] args) 4: { 5: Scanner scnew Scanner(System.in); 6: String ssc.nextLine();//扫描器扫描到…

评论系统--开发总结

前言 目前为止&#xff0c;做了两三个项目&#xff0c;有涉及教育的、论坛的、CMS的&#xff0c;每个项目里都有用到评论这个功能&#xff0c;所以我就想把评论这一块&#xff0c;单独拿出来&#xff0c;做成一个组件化的模块。既节约了开发的工作&#xff0c;还能让自己对这个…

转自51CTO的帖子——宅男程序员给老婆的计算机课程

在51CTO上闲逛的时候&#xff0c;看了这个系列的帖子。感觉不错&#xff0c;特转发于此&#xff0c;留做纪念。 原文链接&#xff1a; 宅男程序员给老婆的计算机课程之0&#xff1a;认清本质 宅男程序员给老婆的计算机课程之1&#xff1a;认清实际 宅男程序员给老婆的计算机课程…

github 使用入门

git是后来居上的版本控制工具&#xff0c;目前已经有非常多的的开源产品用此工具&#xff0c;但此版本控制和别的版本控制工具相比还是有些不太一样&#xff0c;自己走了些弯路&#xff0c;再次记录一下。 学习资料&#xff1a; http://forcefront.com/tag/organization/ http:…

Java的数据类型的挑选

1 int类型和Integer类型的区别 在Java中的int类型只适用于数值计算, 而Integer是类&#xff0c;可以应用于任何需要类的地方。Integer的应用场景包括&#xff1a; int类型因为默认值为0&#xff0c;而Integer默认值为NULL&#xff0c;所以如果没有赋值的话&#xff0c;Integer…

网页窗体切换做不同操作+失去光标+获取光标

网页窗体切换做不同操作失去光标获取光标 今天群里有人有这个需求。 就随手写了个 。 给有用的人参考下。 <html> <head><title>ssss</title><script src"jquery-1.7.1.min.js"></script></head><body οnblurtests1(…

浅析Fusion-IO和Intel SSD

上个月Intel发布了基于PCI-Express的新款SSD 910系列&#xff0c;可以说这一款产品和Fusion在性能上可以一比高下&#xff0c;都可以达到1.5GB/s的持续数据吞吐量。Intel新推出的SSD和Fusion IO产品有什么不同之处呢&#xff1f;我对此简单做了一些对比。 可以说Intel的强项在于…