Vue设置动态样式

<div
 class="background-jianbian"
 :style="{  width: scrollerHeight(item.jianWidth),background: item.topsColor,}"
 ></div>

<div class="link" :style="styleVar(item)"></div>
 

methods: {
    scrollerHeight(width) {
      return width - 50 + "px";
    },
    styleVar(val) {
      return { "--box-width": val + "px" };
    },
  },

<style>
    .link {
         width: var(--box-width);
    }
</style>

//active设置动态样式
<div
    id="tabls"
    @click="changeColor(index)"
    v-for="(item, index) in arry"
    :key="index"
    :class="{ active: num == index }"
 ></div>
<span
    class="imagesa"
    :style="`backgroundImage: url(${backgroundImages[index]})`"
></span>
//style动态样式


  data() {
    return {
      num: 0,
      arry: [
        ["一张图", require("./image/yizhangtu.svg")],
        ["项目可视化", require("./image/keshihua.svg")],
        ["项目审核", require("./image/shenghe.svg")],
        ["监测建管", require("./image/jiance.svg")],
        ["月报进度", require("./image/yuebao.svg")],
      ],
      backgroundImages: [
        require("./image/yizhangtus.svg"),
        require("./image/keshihuas.svg"),
        require("./image/shenghes.svg"),
        require("./image/jiances.svg"),
        require("./image/yuebaos.svg"),
      ],
 }}


<style lang="scss" scope>
.active {
  background-color: rgba(0, 145, 255, 0.16);
}
</style>