Vue $data 对象
示例
使用 $data 对象在点击 <div> 元素时更改其颜色。
export default {
data() {
return {
color: 'lightgreen'
}
},
methods: {
changeColor() {
this.$data.color = 'pink';
}
}
}
在下方查看更多示例。
定义和用法
$data 对象表示 Vue 实例中 data 部分中存储的所有属性。
在上面的示例中，color 属性通过 this.$data.color 来引用，但我们也可以通过 this.color 来引用同一个属性，这更常见。
当我们需要明确表示我们正在引用 Vue 实例中 data 部分的属性时，可以使用 $data 对象。
如果我们要引用以 "_" 或 "$" 开头的 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 方法
