VueJS - Thuộc tính tính toán
Chúng ta đã thấy các phương thức cho Vue instance và các thành phần. Các thuộc tính được tính toán giống như các phương thức nhưng có một số khác biệt so với các phương thức mà chúng ta sẽ thảo luận trong chương này.
Ở cuối chương này, chúng ta sẽ có thể đưa ra quyết định khi nào sử dụng các phương thức và khi nào sử dụng các thuộc tính được tính toán.
Hãy hiểu các thuộc tính được tính bằng cách sử dụng một ví dụ.
Thí dụ
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "computed_props">
FirstName : <input type = "text" v-model = "firstname" /> <br/><br/>
LastName : <input type = "text" v-model = "lastname"/> <br/><br/>
<h1>My name is {{firstname}} {{lastname}}</h1>
<h1>Using computed method : {{getfullname}}</h1>
</div>
<script type = "text/javascript" src = "js/vue_computedprops.js"></script>
</body>
</html>vue_computeprops.js
var vm = new Vue({
el: '#computed_props',
data: {
firstname :"",
lastname :"",
birthyear : ""
},
computed :{
getfullname : function(){
return this.firstname +" "+ this.lastname;
}
}
})Ở đây, chúng tôi đã tạo .htmltệp có tên và họ. Firstname và Lastname là một hộp văn bản được liên kết bằng cách sử dụng thuộc tính tên và họ.
Chúng tôi đang gọi phương thức được tính toán getfullname, phương thức này trả về họ và tên đã nhập.
computed :{
getfullname : function(){
return this.firstname +" "+ this.lastname;
}
}Khi chúng ta nhập vào hộp văn bản, hàm tương tự sẽ được trả về, khi tên hoặc họ của thuộc tính được thay đổi. Do đó, với sự trợ giúp của máy tính, chúng ta không phải làm bất cứ điều gì cụ thể, chẳng hạn như nhớ gọi một hàm. Với tính toán, nó được gọi bởi chính nó, vì các thuộc tính được sử dụng bên trong thay đổi, tức là họ và tên.
Tương tự được hiển thị trong trình duyệt sau. Nhập vào hộp văn bản và hộp văn bản tương tự sẽ được cập nhật bằng cách sử dụng hàm tính toán.
Bây giờ, chúng ta hãy cố gắng hiểu sự khác biệt giữa một phương thức và một thuộc tính được tính toán. Cả hai đều là đối tượng. Có các hàm được định nghĩa bên trong, sẽ trả về một giá trị.
Trong trường hợp của phương thức, chúng tôi gọi nó là một hàm và được tính như một thuộc tính. Sử dụng ví dụ sau, chúng ta hãy hiểu sự khác biệt giữa phương thức và thuộc tính được tính toán.
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "computed_props">
<h1 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
<h1>Random No from method: {{getrandomno1()}}</h1>
<h1>Random No from method : {{getrandomno1()}}</h1>
<h1 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
<h1 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
<h1 style = "background-color:gray;">Random No from computed
property: {{getrandomno}}</h1>
<h1>Random No from method: {{getrandomno1()}}</h1>
<h1>Random No from method: {{getrandomno1()}}</h1>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
name : "helloworld"
},
methods: {
getrandomno1 : function() {
return Math.random();
}
},
computed :{
getrandomno : function(){
return Math.random();
}
}
});
</script>
</body>
</html>Trong đoạn mã trên, chúng tôi đã tạo một phương thức được gọi là getrandomno1 và một thuộc tính được tính toán với một hàm getrandomno. Cả hai đều đang trả lại các số ngẫu nhiên bằng Math.random ().
Nó được hiển thị trong trình duyệt như hình dưới đây. Phương thức và thuộc tính được tính toán được gọi nhiều lần để cho thấy sự khác biệt.
Nếu chúng ta nhìn vào các giá trị ở trên, chúng ta sẽ thấy rằng các số ngẫu nhiên được trả về từ thuộc tính được tính toán vẫn không thay đổi bất kể số lần nó được gọi. Điều này có nghĩa là mỗi khi nó được gọi, giá trị cuối cùng được cập nhật cho tất cả. Trong khi đối với một phương thức, nó là một hàm, do đó, mỗi khi nó được gọi, nó sẽ trả về một giá trị khác.
Nhận / Đặt trong Thuộc tính Tính toán
Trong phần này, chúng ta sẽ tìm hiểu về các hàm get / set trong các thuộc tính được tính toán bằng cách sử dụng một ví dụ.
Thí dụ
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "computed_props">
<input type = "text" v-model = "fullname" />
<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
firstName : "Terry",
lastName : "Ben"
},
methods: {
},
computed :{
fullname : {
get : function() {
return this.firstName+" "+this.lastName;
}
}
}
});
</script>
</body>
</html>Chúng tôi đã xác định một hộp đầu vào được liên kết với fullname, là một thuộc tính được tính toán. Nó trả về một hàm được gọi làget, cung cấp tên đầy đủ, tức là tên và họ. Ngoài ra, chúng tôi đã hiển thị tên và họ là -
<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>Hãy kiểm tra tương tự trong trình duyệt.
Bây giờ, nếu chúng ta thay đổi tên trong hộp văn bản, chúng ta sẽ thấy điều tương tự không được phản ánh trong tên hiển thị trong ảnh chụp màn hình sau.
Hãy thêm hàm setter vào thuộc tính fullname computed.
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "computed_props">
<input type = "text" v-model = "fullname" />
<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
firstName : "Terry",
lastName : "Ben"
},
methods: {
},
computed :{
fullname : {
get : function() {
return this.firstName+" "+this.lastName;
},
set : function(name) {
var fname = name.split(" ");
this.firstName = fname[0];
this.lastName = fname[1]
}
}
}
});
</script>
</body>
</html>Chúng tôi đã thêm hàm set trong thuộc tính fullname computed.
computed :{
fullname : {
get : function() {
return this.firstName+" "+this.lastName;
},
set : function(name) {
var fname = name.split(" ");
this.firstName = fname[0];
this.lastName = fname[1]
}
}
}Nó có tên là tham số, không là gì ngoài tên đầy đủ trong hộp văn bản. Sau đó, nó được chia theo không gian và họ và tên được cập nhật. Bây giờ, khi chúng tôi chạy mã và chỉnh sửa hộp văn bản, điều tương tự sẽ được hiển thị trong trình duyệt. Họ và tên sẽ được cập nhật do chức năng đặt. Hàm get trả về họ và tên, trong khi hàm set sẽ cập nhật nó, nếu có bất kỳ điều gì được chỉnh sửa.
Bây giờ, bất cứ thứ gì được nhập vào hộp văn bản sẽ khớp với những gì được hiển thị như trong ảnh chụp màn hình ở trên.