Thuộc tính được tính toán của Vue
Thuộc tính được tính toán giống như thuộc tính dữ liệu, ngoại trừ việc chúng phụ thuộc vào các thuộc tính khác.
Các thuộc tính được tính toán được viết giống như các phương thức, nhưng chúng không chấp nhận bất kỳ đối số đầu vào nào.
Các thuộc tính được tính toán được cập nhật tự động khi một phần phụ thuộc thay đổi, trong khi các phương thức được gọi khi có điều gì đó xảy ra, chẳng hạn như xử lý sự kiện.
Các thuộc tính được tính toán được sử dụng khi xuất ra thứ gì đó phụ thuộc vào thứ khác.
Thuộc tính được tính toán là động
Ưu điểm lớn của thuộc tính được tính toán là nó có tính động, nghĩa là nó thay đổi tùy thuộc vào giá trị của một hoặc nhiều thuộc tính dữ liệu.
Thuộc tính được tính toán là tùy chọn cấu hình thứ ba trong phiên bản Vue mà chúng ta sẽ tìm hiểu. Hai tùy chọn cấu hình đầu tiên mà chúng ta đã xem xét là 'dữ liệu' và 'phương thức'.
Giống như các thuộc tính được tính toán 'dữ liệu' và 'phương thức' cũng có một tên dành riêng trong phiên bản Vue: ' được tính toán '.
Cú pháp
const app = Vue.createApp({
data() {
...
},
computed : {
...
},
methods: {
...
}
})
Thuộc tính được tính toán 'có' hoặc 'không'
Giả sử chúng ta muốn có một biểu mẫu để tạo các mặt hàng trong danh sách mua sắm và chúng ta muốn đánh dấu xem một mặt hàng mới có quan trọng hay không. Chúng tôi có thể thêm phản hồi 'đúng' hoặc 'sai' khi hộp kiểm được chọn, giống như chúng tôi đã làm trong ví dụ trước:
Ví dụ
Phần tử đầu vào được tạo động để văn bản phản ánh trạng thái.
<input type="checkbox" v-model="chbxVal"> {{ chbxVal }}
data() {
return {
chbxVal: false
}
}
Hãy tự mình thử »Tuy nhiên, nếu bạn hỏi ai đó xem điều gì đó quan trọng, rất có thể họ sẽ trả lời 'có' hoặc 'không' thay vì 'đúng' hoặc 'sai'. Vì vậy, để làm cho biểu mẫu của chúng tôi phù hợp hơn với ngôn ngữ thông thường (trực quan hơn), chúng tôi nên có phản hồi 'có' hoặc 'không' trên hộp kiểm thay vì 'đúng' hoặc 'sai'.
Và đoán xem, thuộc tính được tính toán là một công cụ hoàn hảo để giúp chúng ta làm điều đó.
Ví dụ
Với thuộc tính được tính toán 'isQuan trọng', giờ đây chúng tôi có thể tùy chỉnh phản hồi bằng văn bản cho người dùng khi bật và tắt hộp kiểm.
<input type="checkbox" v-model="chbxVal"> {{ isImportant }}
data() {
return {
chbxVal: false
}
},
computed: {
isImportant() {
if(this.chbxVal){
return 'yes'
}
else {
return 'no'
}
}
Hãy tự mình thử »Thuộc tính được tính toán so với phương thức
Các thuộc tính và phương thức được tính toán đều được viết dưới dạng hàm, nhưng chúng khác nhau:
- Các phương thức chạy khi được gọi từ HTML, nhưng các thuộc tính được tính toán sẽ tự động cập nhật khi phần phụ thuộc thay đổi.
- Thuộc tính được tính toán được sử dụng giống như cách chúng ta sử dụng thuộc tính dữ liệu, nhưng chúng có tính động.
