vue动态设置样式（var函数）

应用场景#

样式可以自定义+当组件中有重复样式定义时可以使用var(变量名)来占位

示例#

给test1组件动态设置颜色1、颜色2，test1组件为颜色1，test1组件内部的两个小元素是颜色2

App.vue

<test :myColor1="'green'" :myColor2="'orange'"></test>

Test.vue

<template>
  <!--  1. 定义props来后将变量赋值给自定义的css变量名 -->
  <div
    class="demo1"
    :style="{ '--myColor1': myColor1, '--myColor2': myColor2 }"
  >
    <div class="test1"></div>
    <div class="test2"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myChart: null,
    };
  },
  props: {
    myColor1: {
      type: String,
      default: "red",
    },
    myColor2: {
      type: String,
      default: "pink",
    },
  },
};
</script>

<style scoped>
.demo1 {
  width: 200px;
  height: 200px;
  /* 2. 在css中使用变量 */
  background-color: var(--myColor1);
}
.test1 {
  width: 50px;
  height: 50px;
  background-color: var(--myColor2);
}

.test2 {
  width: 30px;
  height: 30px;
  background: var(--myColor2);
}
</style>

效果图：