Vue $data 对象
示例
使用$data对象改变 a 的颜色<div>单击时的元素。
export default {
data() {
return {
color: 'lightgreen'
}
},
methods: {
changeColor() {
this.$data.color = 'pink';
}
}
}
请参阅下面的更多示例。
定义和用法
这个$data对象代表存储在对象中的所有属性dataVue 实例的一部分。
在上面的例子中，color属性被称为this.$data.color，但我们可以通过写来引用相同的属性this.color这更常见。
这个$data当我们需要显式声明我们引用 Vue 实例的数据部分中的属性时，使用 object。
我们必须使用$data对象，如果我们想引用名称以“开头的数据属性_" or "$”，因为在这种情况下this单独使用前缀是行不通的。
更多示例
示例
使用$data对象改变 a 的颜色<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 方法
截取页面反馈部分，让我们更快修复内容！也可以直接跳过填写反馈内容!