Thuộc tính tính toán trong Vue

Có thể đặt các thuộc tính sẽ được tính toán một cách phản ứng dựa trên các thuộc tính khác. Các thuộc tính như vậy được gọi là tính toán. Chúng được đặt trong tùy chọn computed.

Hãy xem xét một ví dụ. Giả sử trong các thuộc tính lưu trữ tên và họ của người dùng:

data() {
	return {
		name: 'john',
		surn: 'smit',
	}
}

Hãy tạo một thuộc tính full, thuộc tính này sẽ chứa đầy đủ họ và tên:

computed: {
	full: function() {
		return this.name + ' ' + this.surn;
	}
}

Hãy hiển thị nội dung của các thuộc tính của chúng ta trong template:

<template>
	<p>{{ name }}</p>
	<p>{{ surn }}</p>
	<p>{{ full }}</p>
</template>

Các thuộc tính tính toán thay đổi một cách phản ứng. Điều này có nghĩa là nếu chúng ta thay đổi tên hoặc họ, thì thuộc tính full của chúng ta cũng sẽ tự động thay đổi một cách phản ứng và chúng ta sẽ thấy ngay sự thay đổi trên màn hình.

Giả sử trong thuộc tính cost lưu trữ giá của sản phẩm, và trong thuộc tính amount - số lượng của các sản phẩm này. Hãy tạo một thuộc tính tính toán price, thuộc tính này sẽ chứa tổng giá trị của các sản phẩm (giá nhân với số lượng)

Tạo một nút bấm, khi nhấp vào sẽ thay đổi thuộc tính cost. Kiểm tra xem thuộc tính tính toán cũng sẽ thay đổi khi đó.