Vue3.0学习 - 第十五节，Vue3 中如何在css中使用js的变量

╰半夏微凉° 2022-10-05 00:43 46阅读 0赞

vue3中有一个方法，在css中使用js里定义的变量

此方法是使用data()\{\} 中定义的变量，使用setup()\{\}中的变量会报错，此种方法，还没找出原因，欢迎评论提出

<template>
    
        <div class="a-div">
          vue3在css中使用js的变量
        </div>
    
    </template>
    
    <script>
    
    export default {
      data() {
        return {
          color: "red",
          font: {
            size: "16px",
            color: "green",
          },
        };
      },
      setup() {
    
      },
    };
    </script>
    
    <style  lang="scss" scoped>
    .a-div {
      width: 200px;
      height: 200px;
      background: v-bind(color);
      font-size: v-bind("font.size");
      color: v-bind("font.color");
    }
    </style>

使用setup()\{\}中的变量   使用defineComponent却可以  具体原因还在研究

<template>
      <div class="a-div">
        vue3在css中使用js的变量
      </div>
      <div class="b-div"></div>
    </template>
    
    <script>
    import { defineComponent, ref } from "@vue/runtime-core";
    
    export default defineComponent({
      data() {
        return {
          color: "red",
          font: {
            size: "20px",
            color: "green",
          },
        };
      },
      setup() {
        let back = ref("#ddd999");
        return {
          back,
        };
      },
    });
    </script>
    
    <style  lang="scss" scoped>
    .a-div {
      width: 200px;
      height: 200px;
      background: v-bind(color);
      font-size: v-bind("font.size");
      color: v-bind("font.color");
    }
    .b-div {
      width: 200px;
      height: 200px;
      background: v-bind(back);
    }
    </style>

欢迎指出问题的所在