$data

示例

使用 $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 前缀将不起作用 。

更多示例

示例

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

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

颜色选择器

读后有收获微信请站长喝咖啡