vue-sytle样式抽离

效果

源代码

<template>
  <div class="divClass">
    <!-- 使用集合形式，style则对应集合，当前可应用于redClass中 -->
    <div :style="divStyle" class="redClass"></div>
    <!-- 使用单个变量，style则对应单个, 当前可应用于blueClass中-->
    <div :style="{'--blueColor': blueColor}" class="blueClass"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //创建divStyle对象集合
      divStyle: {
        "--redColor": "red"
      },
      // 创建单个样式变量
      blueColor: "blue"
    };
  }
};
</script>
<style  lang="scss" scoped>
// 画一个蓝圈圈
.blueClass {
  border: 1px solid var(--blueColor);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  line-height: 40px;
  text-align: center;
  color: #fff;
}

// 画一个红圈圈
.redClass {
  border: 1px solid var(--redColor);
  border-radius: 50%;

  width: 40px;
  height: 40px;
  border-radius: 50%;
  line-height: 40px;
  text-align: center;
  color: #fff;
}

.divClass {
  display: flex;
  margin-top: 10%;
  justify-content: space-evenly;
}
</style>

解说

1. 在vue中我们需要抽离变量当样式，我们使用变量来进行操作
2. 绑定style样式，我们就可以在class中进行赋值了
3. 如果绑定了集合，我们则直接使用var(key值) 即可

4. 如果绑定了变量，我们则在绑定的style中创造集合，将变量当value值放进去即可, 在style中和3一样的哦，都要使用var(key值)