Vue $data 对象

实例

单击 <div> 元素时，使用 $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 对象，因为在这种情况下，仅使用此前缀是不起作用的。

更多实例

实例

每次单击 <div> 元素时，使用 $data 对象更改其颜色。

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