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

情况描述:

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

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

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

采用方式:

style 中获取 data 中的值

代码:




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


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


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

你可能感兴趣的:(前端,javascript,html)