一、 v-html是什么?

v-html 用来更新元素的 innerHTML,但是存在一定的安全性。

注意:
1、内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。
2、在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。只在可信内容上使用 v-html,永不用在用户提交的内容上。

二、使用方式

1、简单使用

<div v-html="'<h1>Hello World</h1>'"></div>

在这里插入图片描述
2、使用样式(不止3种方式)
(1)vue模板元素中的行内样式

<div style="color:red" v-html="'<h1>Hello World</h1>'"></div>

在这里插入图片描述
(2)v-html属性字符串内标签的行内元素

<div v-html="`<h1 style='color:red'>Hello World</h1>`"></div>

在这里插入图片描述

(3)vue模板元素中的class样式

<div v-html="`<h1 class='content'>Hello World</h1>`"></div>
<style scoped  lang="less">
	:deep(.content){ color : red }
</style>

在这里插入图片描述

以上就是Vue 中 v-html 的使用,关注《前端项目问题》专栏学习更多。
我会将自己平时项目中常见的问题以及笔试面试的知识在CSDN与大家分享,一起进步,加油。

Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐