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