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 方法