vue2.0 通過v-html指令渲染的富文本無法修改樣式的解決方案

在最近的vue項目中遇到的問題：v-html渲染的富文本，無法在樣式表中修改樣式；

比如下面的代碼，div.descBox里面的p標簽的color樣式並不是"color: blue"；

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

<script>
export default{
    data(){
        return {
            desc: "<p>I believe I can fly</p>"
        }
    }
}
</script>

<style scoped>
.descBox p{
   color: blue;
}
</style>

這是為什么呢？原因很簡單：如果p標簽在template中先寫出來，那么在<style></style>標簽中是可以修改其樣式的；

這應該是vue編譯的規范吧，未在虛擬dom中渲染的元素無法修改樣式；

解決方案1：在updated生命周期函數中，js動態配置樣式，代碼如下

updated() {
    $('.descBox').find('p').css('color', 'blue');
 },

解決方案2：去掉style標簽中的scoped屬性

至於為啥可以呢？網上倒是有些解釋，但是我覺得不嚴謹，直接上代碼吧

<style>
.descBox p{
   color: blue;
}
</style>