v-bind 繫結內聯樣式有三種，第一種是官方介紹的方式，第二種是利用 CSS var() 函式，第三種是直接在 CSS 中使用 v-bind()。

官方介紹的方式，在這裡不過多贅述，請檢視(官方文件)[https://v3.cn.vuejs.org/guide/class-and-style.html#繫結內聯樣式]

如果我們要動態更改一個 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>