Đối tượng dữ liệu Vue $
Ví dụ
Sử dụng đối tượng $data
để thay đổi màu của phần tử <div>
khi nó được nhấp vào.
export default {
data() {
return {
color: 'lightgreen'
}
},
methods: {
changeColor() {
this.$data.color = 'pink';
}
}
}
Chạy ví dụ »Xem thêm ví dụ dưới đây.
Định nghĩa và cách sử dụng
Đối tượng $data
đại diện cho tất cả các thuộc tính được lưu trữ trong phần data
của phiên bản Vue.
Trong ví dụ trên, thuộc tính color
được tham chiếu bằng this.$data.color
, nhưng chúng ta có thể tham chiếu đến cùng một thuộc tính bằng cách chỉ viết this.color
và điều đó phổ biến hơn.
Đối tượng $data
được sử dụng khi chúng ta cần nêu rõ rằng chúng ta đang đề cập đến một thuộc tính trong phần dữ liệu của phiên bản Vue.
Chúng ta phải sử dụng đối tượng $data
nếu muốn tham chiếu đến một thuộc tính dữ liệu có tên bắt đầu bằng " _
" hoặc " $
", vì trong những trường hợp như vậy, chỉ tiền tố this
sẽ không hoạt động.
Thêm ví dụ
Ví dụ
Sử dụng đối tượng $data
để thay đổi màu của phần tử <div>
mỗi khi nó được nhấp vào.
<div
v-on:click="$data.color+=100"
v-bind:style="{backgroundColor:'hsl('+$data.color+',80%,80%)'}"
>
<p>Click here</p>
</div>
Chạy ví dụ »Trang liên quan
Hướng dẫn Vue: Chỉ thị Vue v-on
Hướng dẫn Vue: Chỉ thị Vue v-bind
Hướng dẫn Vue: Phương thức Vue