vue v-text style when rendering rich text v-html modified problem
v-text or {{}} text interpolated
v-html HTML interpolation
problem: v-html rendering rich text can not modify the style in the style sheet, the contents of the rich text acquired in the interface where unable to modify the style
Solution: In the updated life cycle, the dynamic configuration pattern
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>