Tùy chọn 'được tính toán' của Vue
Ví dụ
Sử dụng thuộc tính được tính toán bên trong tùy chọn computed
để hiển thị văn bản nút thích hợp.
export default {
data() {
return {
msg: 'Hello World!',
showMsg: false
};
},
computed: {
btnText() {
if( this.showMsg ) {
return 'Hide'
}
else {
return 'Show'
}
}
}
};
Chạy ví dụ »Định nghĩa và cách sử dụng
Tùy chọn computed
là một đối tượng có tất cả các thuộc tính được tính toán được khai báo trên phiên bản Vue.
Các thuộc tính được tính toán thường ở dạng chỉ đọc (xem ví dụ ở trên), nhưng có thể định nghĩa thuộc tính được tính toán là một đối tượng có cả hàm get
và hàm set
, có nghĩa là thuộc tính được tính toán cũng có thể được ghi vào.
Lưu ý: Nên tránh các hàm mũi tên khi khai báo các thuộc tính được tính toán vì không thể truy cập phiên bản Vue từ bên trong hàm như vậy bằng từ khóa this
.
Trang liên quan
Hướng dẫn về Vue: Thuộc tính được tính toán của Vue
Hướng dẫn Vue: Chỉ thị Vue v-on