Vue $data 物件

export default {
  data() {
    return {
      color: 'lightgreen'
    }
  },
  methods: {
    changeColor() {
      this.$data.color = 'pink';
    }
  }
}

更多示例請參見下方。

定義和用法

$data 物件代表儲存在 Vue 例項 data 部分的所有屬性。

在上面的示例中，color 屬性透過 this.$data.color 引用，但我們也可以僅透過編寫 this.color 來引用相同的屬性，這更常見。

當我們想明確表示我們正在引用 Vue 例項資料部分中的屬性時，會使用 $data 物件。

如果我們要引用名稱以 "_" 或 "$" 開頭的資料屬性，則必須使用 $data 物件，因為在這種情況下，僅使用 this 字首將不起作用。

更多示例

<div 
  v-on:click="$data.color+=100"
  v-bind:style="{backgroundColor:'hsl('+$data.color+',80%,80%)'}"
>
  <p>Click here</p>
</div>

相關頁面

Vue 教程： Vue v-on 指令

Vue 教程：Vue v-bind 指令

Vue 教程： Vue 方法