【前端项目问题】Vue 中 v-html 的使用
一、 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>
上一篇:
Java基础知识总结(2021版)
下一篇:
redis常见面试题及答案