vue:为v-html中的内容设置样式

1. 在updated中找到目标元素,然后添加样式

    updated () {
      // document.getElementById('caseContent') 包裹层
      // 目标图片:width:100%
      let obj = document.getElementById('caseContent');
      let imgs = obj.getElementsByTagName('img');

      for (let i = 0; i < imgs.length; i++) {
        imgs[i].style.width = '100%';
      }
    },

2. 通过 v-html 创建的 DOM 内容不受作用域内的样式影响,但是你仍然可以通过深度作用选择器来为他们设置样式。

——深度作用选择器

如果你希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 >>> 操作符:

<style scoped>
.a >>> .b { /* ... */ }
</style>

上述代码将会编译成:

.a[data-v-f3f3eg9] .b { /* ... */ }

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 操作符取而代之——这是一个 >>> 的别名,同样可以正常工作。

https://vue-loader.vuejs.org/zh-cn/features/scoped-css.html

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

推荐阅读更多精彩内容