Vue中改变v-html渲染出来的样式

在vue2.0中使用v-html渲染时有可能我门会需要微调一下样式,今天在使用v-html时候发现一个问题,渲染出来的在<style></style>中无法直接改变样式。

tp.png

当我们使用v-html渲染页面,使用下面这种方式去修改样式并没有效果,

tp2.png

我在网上找了好多解决的方法

一.
微信截图_20190330140624.png

我们可以 给 width:100% !important; 这样就可以改变 它的属性

二.
去掉style标签中的scoped属性
scoped属性导致css仅对当前组件生效(用css3的属性选择器+生成的随机属性实现的),而html绑定渲染出的内容可以理解为是子组件的内容,子组件不会被加上对应的属性,所以不会应用css.
但是我使用这种方法也并没有生效
三.
这种方法使我使用的试了下它可以生效
在updated生命周期函数中,js动态配置样式,代码如下:


微信截图_20190330140805.png

如果大家在使用前2个方法没有生效时,可以试一下第三中方法。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • 本文发布在我的博客vue中慎用style的scoped属性许可协议: 署名-非商业性使用-禁止演绎4.0国际 ...
    2ue阅读 12,964评论 2 7
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,969评论 1 45
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 10,455评论 0 29
  • title: 风格指南type: style-guide 这里是官方的 Vue 特有代码的风格指南。如果在工程中使...
    ChenyuMa阅读 4,751评论 1 1