【前端项目问题】Vue 中 v-html 的使用
2022/1/31 6:06:05
本文主要是介绍【前端项目问题】Vue 中 v-html 的使用,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
Vue 中 v-html 的使用
- 一、 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>
以上就是Vue 中 v-html 的使用,关注《前端项目问题》专栏学习更多。
我会将自己平时项目中常见的问题以及笔试面试的知识在CSDN与大家分享,一起进步,加油。
这篇关于【前端项目问题】Vue 中 v-html 的使用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南