有深度选择器情况下如何进行背景图动态变换

_文和_

已于 2024-02-24 22:52:10 修改

阅读量511

点赞数 9

文章标签：前端 javascript html

于 2023-11-28 13:29:21 首次发布

本文链接：https://blog.youkuaiyun.com/qq_36978986/article/details/134665282

版权

文章介绍了如何使用深度选择器改变Vue应用的div背景图，包括基本的静态设置以及通过data中的值实现动态背景图变换，利用了style和computed属性配合使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

情况描述：

采用深度选择器可以正常穿透进而改变div的背景图，如下代码。

::v-deep .v-application {
  background: url(".......");
  background-size: cover;
}

但实现更复杂的动态变换背景图，则需要将url中的值进行不断变化。

采用方式：

style 中获取 data 中的值

代码：

<v-app id="inspire" :style="styleVar"></v-app>


 data() {
    return {
      bg: "url('......')",
    };
  },


 computed: {
    styleVar() {
      return {
        "--bg": this.bg,
      };
    },
  },


::v-deep .v-application {
  background: var(--bg);
  background-size: cover;
}

关注公众号获取更多有趣分享