v-html 解析富文本内容

• 例如有个msg数据

data() {
    return {
        msg : "<h1 style='color:red'>这是一个html元素内容</h1> <h2>h2内容</h2>",
    }
},

<template>
    <div class="msg-html" v-html="msg">         
    </div>
</template>

<style lang="scss" scoped>
    .msg-html {
        ::v-deep h2 {
            color: pink;
        }
    }
</style>>

image.png

• 样式设置
  需要使用>>> ::v-deep /deep/ 这几个之一来穿透scoped。

v-html