vue-------为v-html绑定样式的几种方法

cyl97

于 2021-04-01 19:01:17 发布

阅读量400

点赞数

分类专栏： vue踩坑记录文章标签： vue css

本文链接：https://blog.youkuaiyun.com/cyl97/article/details/115381136

版权

vue踩坑记录专栏收录该内容

6 篇文章

订阅专栏

本文探讨了在Vue应用中如何为使用v-html指令插入的动态HTML内容添加样式。介绍了多种方法，包括使用内联样式、CSS类、 scoped CSS及Vue的深度选择器等，帮助开发者灵活地管理动态内容的样式表现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="a1" v-html="<a href=javascript:; class=a2>超链接</a>"></div>

//1. style，使用了less或者sass
.a1 { 
	/deep/ .a2 {
		//a2样式, /deep/又叫做深度选择器，会从当前组件的根元素开始往下查找
	}
}

//2. style, 使用css
.a1 >>> .a2 {/**/}

//3. 使用两个style标签，一个加scoped,一个不加
<style scoped> 
//书写正常样式
 </style> 
 <style > 
//v-html的样式
 </style>