v-bind 绑定内联样式有三种，第一种是官方介绍的方式，第二种是利用 CSS var() 函数，第三种是直接在 CSS 中使用 v-bind()。
官方介绍的方式，在这里不过多赘述，请查看官方文档
如果我们要动态更改一个 p 标签的字体颜色，利用 CSS var() 函数是这样做到的：
<template>
<div>
<p v-bind:style="{ --color: fontColor }">Hello Vue.js!</p>
</div
</template>
<script lang="js">
export default {
data() {
return {
fontColor: 'red'
}
}
}
</script>
<style lang="css" scoped>
p {
color: var(--color)
}
</style>
直接在 CSS 中使用 v-bind()，是这样做到的：
<template>
<div>
<p>Hello Vue.js!</p>
</div
</template>
<script lang="js">
// ... JS 代码与上面的例子一样
</script>
<style lang="css" scoped>
p {
color: v-bind(fontColor)
}
</style>