v-html解析的标签怎么改样式

最新推荐文章于 2024-12-24 14:16:25 发布

bingduYu

最新推荐文章于 2024-12-24 14:16:25 发布

阅读量721

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue学习

本文链接：https://blog.youkuaiyun.com/Yugoup/article/details/96990167

vue学习专栏收录该内容

14 篇文章

订阅专栏

本文探讨了Vue.js项目中scoped属性的作用与限制。当使用scoped属性时，样式仅作用于当前组件，但如果通过v-html引入的内容包含类名，则需要特别注意scoped属性的影响。文章提供了示例代码并解释了解决方案。

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

代码备忘录

scoped要去掉，否则类样式不会生效

scoped属性是私有属性，只对当前组件生效，而v-html绑定渲染出的内容可以理解为是子组件的内容

<div v-html="stem"></div>

<script>
export default {
  data () {
    return {
      stem:'<div class="stem_1"><div class="stem_2">数据</div></div>',
    }
  },
}
</script>

<style>
.stem_1{
  width:auto;
  height:auto;
  border:1px solid red;
  padding:20px;
}
.stem_2{
  width:100px;
  height:100px;
}
</style>