Vue3 <style>状态驱动 CSS 变量

用法就是在style中使用关键方法 v-bind()，vue回去实例里找到对象变量并加入style变量中。

新版是如下：

<script>
export default {
  data() {
    return {
      color: red
    };
  }
};
</script>

<style>
.box {
  background: v-bind("color");
}
</style>

这东西用途在哪里？

• 其一，做动态主题肯定是可行这块没有太多值得说的。
• 其二，我想说的是它可以减少<template>\ <script>中的计算属性使其各执其职

在vue2中里可能会有如下操作

案例一

使用 :style 动态改变其样式。

<template>
  <div class="about" :style="{ width: size + 'px', height: size + 'px' }">
    <span>This is an about page</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      size: 100
    };
  },
  mounted() {
    setInterval(() => {
      this.size = Math.floor(Math.random() * 500) + 100;
    }, 1 * 1000);
  }
};
</script>

<style>
.about {
  width: 100px;
  height: 100px;
  background: red;
}
</style>

案例二

使用 compute 计算属性触发其样式

<template>
  <div class="about" :style="aboutStyle">
    <span>This is an about page</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      size: 100
    };
  },
  computed: {
    aboutStyle() {
      return {
        width: this.size + "px",
        height: this.size + "px"
      };
    }
  },
  mounted() {
    setInterval(() => {
      this.size = Math.floor(Math.random() * 500) + 100;
    }, 1 * 1000);
  }
};
</script>

<style>
.about {
  width: 100px;
  height: 100px;
  background: red;
}
</style>

但这一切在Vue3你可以~

• 你可以不用写两份默认值
• <template>\ <script>中减少不必要的样式状态

<template>
  <div class="about">
    <span>This is an about page</span>
  </div>
</template>

<script>
export default {
  inject: ["theme"],
  data() {
    return {
      size: 100
    };
  },
  mounted() {
    setInterval(() => {
      this.size = Math.floor(Math.random() * 500) + 100;
    }, 1 * 1000);
  }
};
</script>

<style scoped>
.about {
  width: v-bind(size + "px");
  height: v-bind(size + "px");
  background: v-bind("theme.color");
}
</style>

语法上值得的注意

可以使用如下几种方式?:

<template>
  <div class="text">hello</div>
</template>

<script>
  export default {
    data() {
      return {
        color: "red",
        font: {
          size: "2em",
        },
        view: {
          size: 100
        }
      }
    },
    compute: {
        width() {
            return this.view.size;
        }
    }
  }
</script>

<style>
  .text {
    color: v-bind(color);
    font-size: v-bind('font.size');
    width: v-bind(width + "px");
    height: v-bind(`${view.size}px`);
  }
</style>

绝不可以☹️:

<style>
  .text {
    height: v-bind("view.size" + "px");
  }
</style>