vue v-html v-text渲染富文本时的样式修改问题

vue v-html v-text渲染富文本时的样式修改问题

v-text 或者 {{ }} 文本插值
v-html HTML插值
问题： v-html渲染的富文本无法在样式表中修改样式，在接口里获取的富文本的内容无法修改样式
解决方案： 在updated生命周期中，动态配置样式

updated() {
  // jquery方法修改           需要vue引入jquery
  $('.box').find('p').css('color','#000')
  // refs               需要在template里面对应的想要修改的dome加上ref属性
  this.$refs.xxx.style.color = ''
}

<template>
    <div class="descBox" v-html='desc'></div>
</template>

<script>
export default{
    data(){
        return {
            desc: "<p>I believe I can fly</p>"
        }
    }
},
//解决方案1：在updated生命周期函数中，js动态配置样式，代码如下
updated() {    //生命周期函数
    $('.descBox').find('p').css('color', 'blue');
 },
</script>



//解决方案2：去掉style标签中的scoped属性

至于为啥可以呢？网上倒是有些解释，但是我觉得不严谨，直接上代码吧
<style scoped>
.descBox p{
   color: blue;
}
</style>