v-bind 是 Vue 中最常用的指令之一，用于把组件实例的数据绑定到 DOM 属性或组件的 props 上，具体用法可以查看我之前的文章（点击查看）。其实我们还可以在 <style>（通常是未被运行时直接处理的部分）里写 v-bind（propName），Vue 的 SFC 编译器会在构建时/运行时把它转为 CSS 变量，并把对应的值注入到元素上（a 或通过内联样式注入），下面我将通过样例进行演示。

1，样例代码

<template>
    <div class="my-component">
        <button class="color" @click="changeColor">改变颜色</button>
    </div>
</template>
<script>
export default {
    name: 'MyComponent',
    data() {
        return {
            color: "red"
        }
    },
    methods: {
        changeColor() {
            this.color = this.color === "red" ? "green" : "red";
        }
    },
}
</script>
<style scoped>
.color {
    background-color: v-bind(color);
}
</style>

2，运行效果