v-html指令渲染出的内容如何添加样式

关于v-html

  在vue使用中,指令 v-html渲染页面经常用到,类似于jQuery的$('x').html( )去渲染。通过指令 v-html渲染出来的内容还会带有原来的标签及其样式,如果需要修改或者重设其样式,应该如何去做呢?

采坑

  首先,我在style中用子级选择器去选中并修改样式,经过猛如虎的操作后,并没生效。F12打开Elements调试,发现在style里面样式根本没加载上去,没有class中也没有类名出现。除此之外,渲染非该指令元素时,所有的类名会跟有 [data-v-xxxxxx]的东西。

爬坑

解决方案

现给出3中方案来解决此问题:

  • 去掉style中的 scoped;
  • watch监测数据变化;
  • 深度选择器 >>>
方案1实践

去掉style中的scoped

  在vue组件中,我们写style时,为了防止页面样式冲突,在每个组件中会加上 scoped属性。经测试,去掉该属性即可渲染样式成功。但是在组件过多或者项目中大时,经常会出现页面样式冲突,因此该方法不建议使用

方案2实践

watch监测数据变化

  在 script>exportdefault中,watch属性可监听v-html所绑定值的变化。如果是后台请求的数据,那么可以在watch中监听改数据变化,当数据发生改变驱动视图后,动态绑定一个class来改变子级元素样式。此方法有一定局限性

方案3实践

深度选择器 >>>

  此时,深度选择器的应用则脱颖而出。深度选择器 >>>,可深度改变子级样式。例:

<template>
    <div class="test"></div>
</template>

<script>
// ***
</script>

<style scoped>
    .test >>> *{
        width: 100%;
    }
</style>

  如果使用 scss或者 less等css扩展语言,则用 /deep/替代:

<style scoped type="text/scss" lang="scss">
    .test{
        /deep/ *{
            width: 100%;
        }
    }
</style>

tips

  scoped属性导致css仅对当前组件生效,而html绑定渲染出的内容可以理解为是子组件的内容,一般情况下子组件不会被加上对应的属性,所以不会应用带有scoped的css。

原文发布于微信公众号 - 流眸(zxm0146)

原文发表时间:2019-04-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券