在Vue项目开发中，有时候我们需要在style标签中使用我们所定义的JS变量来编写CSS。

根据官方文档，我们可以使用v-bind来实现这个目的

选项式API：

<template>
  <div class="text">hello</div>
</template>
 
<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>
 
<style>
.text {
  color: v-bind(color);
}
</style>

组合式API：

<script setup>
import { ref } from 'vue'
const theme = ref({
    color: 'red',
})
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  color: v-bind('theme.color');
}
</style>

还有一个问题，如果我们的变量是数字，但是我们想要设置像素px怎么办？

以下以组合式API为例（选项式API方法大同小异），提供两种解决方案。

一种是使用 computed 计算属性改变它

<script setup>
import { computed } from 'vue';
const props = defineProps({ size: Number });
 
const sizePx = computed(() => `${props.size}px`)
</script>
 
<template>
  <p>hello</p>
</template>
 
<style scoped>
p {
  font-size: v-bind(sizePx);
}
</style>

还有一种方式是使用 CSS 计算属性calc

<script setup>
defineProps({ size: Number });
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  font-size: calc(1px * v-bind(size));
}
</style>

那么如何在代码中使用style属性呢？

也很简单，根据官方文档，在style标签中加上module，然后就能通过$style来使用style中的CSS属性。

<template>
  <p :class="$style.red">This should be red</p>
</template>
 
<style module>
.red {
  color: red;
}
</style>

还可以给style的module attribute设置不同的名字，从而调用不同style标签中的属性

<template>
  <p :class="classes1.red">This should be red</p>
</template>
 
<style module="classes1">
.red {
  color: red;
}
</style>
 
<style module="classes2">
.red {
  color: green;
}
</style>

如果想要在<script setup>中使用，可以使用 useCssModule

import { useCssModule } from 'vue';

const classes1 = useCssModule('classes1');

const classes2 = useCssModule('classes2');