Tính toán

Giới thiệu nội dung bài viết

Trong một chương trình, thường chúng ta sẽ cần những thuộc tính được tính toán từ những data trạng thái có sẵn của ứng dụng, hay chúng ta muốn tạo ta một thể hiện cho một trạng thái nào đó thì ta sẽ dùng computed, computed được hiểu như 1 biến có getter và setter, có 2 cách viết

1. Cách đơn giản nhất là chỉ định nghĩa getter

Khi xuất hiện setter getter thì chúng hình dung là à: get và set cho biến gì, chính xác nó sẽ có 1 biến đích để chúng ta tạo ra một thể hiện computed cho biến đó. Lấy ví dụ: tạo một computed fullName đinh nghĩa get và set thì chúng ta có thể có được 2 biến firstName và lastName khi chúng ta cập nhật fullName. ngược lại thì khi cập nhật firstName và lastName thì chúng ta cũng có 1 fullName tương ứng.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div id="app"> 
 <div></div>
 <button @click="changeName">Change name</button> </div> 
<script> 
 var app = new Vue({ 
 el: "#app", 
 data() { 
 return { 
 firstName: "Duc", 
 lastName: "Hoang", 
 }; 
 }, 
 computed: { 
 fullName: { 
 get() { 
 return `${this.firstName} ${this.lastName}`;  }, 
 set(val = "") { 
 const [fistName, lastName] = val.split(" ");  this.firstName = fistName; 
 this.lastName = lastName; 
 }, 
 }, 
 }, 
 methods: { 
 changeName() { 
 this.fullName = "Van Anh"; 
 }, 
 }, 
 }); 
</script> 

Chúng ta sẽ thấy được sự thay đổi khi nhấn vào button “Change Name”

Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm

Các khoá học lập trình MIỄN PHÍ tại đây

Comments