今天遇到了一個(gè)問(wèn)題，記錄一下。當(dāng)我用v-html來(lái)動(dòng)態(tài)綁定含有html標(biāo)簽的內(nèi)容時(shí)，在css樣式中對(duì)于html標(biāo)簽進(jìn)行樣式的書寫，但是對(duì)應(yīng)的樣式并沒(méi)有按照設(shè)置的來(lái)。
<div class="test-wrapper" v-html="content"></div>
data () {
return {
content: "xxxx<strong class='sign'>YYYY</strong>xxxx"
}
}
.test-wrapper {
width: 96%;
height: 40px;
line-height: 40px;
padding: 0 2%;
background: #3071A9;
color: #fff;
font-size: 16px;
}
.test-wrapper > .sign {
color: red;
}
在瀏覽器中運(yùn)行的時(shí)候，類名為sign的內(nèi)容并沒(méi)有變成紅色。
image.png
解決方案一：在
updated()生命周期函數(shù)中，利用js對(duì)標(biāo)簽進(jìn)行動(dòng)態(tài)配置樣式；
updated () {
$('.test-wrapper').find('.sign').css('color', 'red')
}
解決方案二：去掉樣式的scoped屬性
