【前端项目问题】Vue 中 v-html 的使用

Vue 中 v-html 的使用

一、 v-html是什么？

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

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

二、使用方式

1、简单使用

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

2、使用样式（不止3种方式）

（1）vue模板元素中的行内样式

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

（2）v-html属性字符串内标签的行内元素

<divv-html="`<h1style='color:red'>HelloWorld</h1>`"></div>

（3）vue模板元素中的class样式

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

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