vue中v-html渲染出来的元素添加样式
<span v-html="ExhibitionData.content" id="Content"></span></li>不能直接在 <style></style> 中修改css样式 这应该是vue中虚拟dom渲染的元素无法修改样式;方法1:在updated生命周期函数中,js动态配置样式(这里引入了jQ,可以用原生...
·
<span v-html="ExhibitionData.content" id="Content"></span></li>
不能直接在 <style></style> 中修改css样式 这应该是vue中虚拟dom渲染的元素无法修改样式;
方法1:在updated生命周期函数中,js动态配置样式(这里引入了jQ,可以用原生js更改样式)
updated(){
$('#Content').find('img').css('width', '100%')
},
方法2:去掉style标签中的scoped属性!(注意类名一样会污染全局样式,用时慎重)
scoped属性导致css仅对当前组件生效(用css3的属性选择器+生成的随机属性实现的),而html绑定渲染出的内容可以理解为是子组件的内容,子组件不会被加上对应的属性,所以不会应用css.
方法3:写样式的时候添加>>>
<style scoped>
#Content >>> img{
width: 100%;
}
</style>
修改后:
更多推荐
已为社区贡献22条内容
所有评论(0)