vue中v-html渲染出来的元素添加样式

 vue中v-html渲染出来的元素添加样式_第1张图片

 

不能直接在 中修改css样式 这应该是vue中虚拟dom渲染的元素无法修改样式;

方法1:在updated生命周期函数中,js动态配置样式(这里引入了jQ,可以用原生js更改样式)

updated(){
          $('#Content').find('img').css('width', '100%')
        },

方法2:去掉style标签中的scoped属性!(注意类名一样会污染全局样式,用时慎重)

scoped属性导致css仅对当前组件生效(用css3的属性选择器+生成的随机属性实现的),而html绑定渲染出的内容可以理解为是子组件的内容,子组件不会被加上对应的属性,所以不会应用css.

方法3:写样式的时候添加>>>

修改后: 

vue中v-html渲染出来的元素添加样式_第2张图片

你可能感兴趣的:(Vue,vue,v-html,修改样式)