VueJS - คุณสมบัติที่คำนวณ
เราได้เห็นวิธีการสำหรับอินสแตนซ์ Vue และส่วนประกอบแล้ว คุณสมบัติการคำนวณเป็นเหมือนวิธีการ แต่มีความแตกต่างบางประการเมื่อเปรียบเทียบกับวิธีการซึ่งเราจะพูดถึงในบทนี้
ในตอนท้ายของบทนี้เราจะสามารถตัดสินใจได้ว่าเมื่อใดควรใช้วิธีการและเมื่อใดที่จะใช้คุณสมบัติที่คำนวณได้
มาทำความเข้าใจคุณสมบัติที่คำนวณโดยใช้ตัวอย่าง
ตัวอย่าง
<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;
}
}
})ที่นี่เราได้สร้าง .htmlไฟล์ที่มีชื่อและนามสกุล Firstname and Lastname คือกล่องข้อความที่ถูกผูกไว้โดยใช้คุณสมบัติชื่อและนามสกุล
เรากำลังเรียกใช้เมธอด getfullname ที่คำนวณซึ่งจะส่งคืนชื่อและนามสกุลที่ป้อน
computed :{
getfullname : function(){
return this.firstname +" "+ this.lastname;
}
}เมื่อเราพิมพ์ในช่องข้อความฟังก์ชันจะส่งคืนเดียวกันเมื่อคุณสมบัติชื่อหรือนามสกุลมีการเปลี่ยนแปลง ดังนั้นด้วยความช่วยเหลือของการคำนวณเราไม่จำเป็นต้องทำอะไรที่เฉพาะเจาะจงเช่นการจำเพื่อเรียกใช้ฟังก์ชัน เมื่อคำนวณแล้วจะถูกเรียกโดยตัวมันเองเนื่องจากคุณสมบัติที่ใช้ภายในมีการเปลี่ยนแปลงเช่นชื่อและนามสกุล
สิ่งเดียวกันนี้จะปรากฏในเบราว์เซอร์ต่อไปนี้ พิมพ์ในกล่องข้อความและสิ่งเดียวกันนี้จะได้รับการอัปเดตโดยใช้ฟังก์ชันคำนวณ
ตอนนี้เรามาลองทำความเข้าใจความแตกต่างระหว่างวิธีการและคุณสมบัติที่คำนวณ ทั้งสองเป็นวัตถุ มีฟังก์ชันที่กำหนดไว้ภายในซึ่งส่งคืนค่า
ในกรณีของวิธีการเราเรียกมันว่าเป็นฟังก์ชันและสำหรับคำนวณเป็นคุณสมบัติ ใช้ตัวอย่างต่อไปนี้ให้เราเข้าใจความแตกต่างระหว่างวิธีการและคุณสมบัติที่คำนวณ
<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>ในโค้ดด้านบนเราได้สร้างเมธอดที่เรียกว่า getrandomno1 และคุณสมบัติที่คำนวณพร้อมฟังก์ชัน getrandomno. ทั้งคู่ให้ตัวเลขสุ่มกลับมาโดยใช้ Math.random ()
จะปรากฏในเบราว์เซอร์ดังที่แสดงด้านล่าง วิธีการและคุณสมบัติที่คำนวณถูกเรียกหลายครั้งเพื่อแสดงความแตกต่าง
หากเราดูค่าด้านบนเราจะเห็นว่าตัวเลขสุ่มที่ส่งคืนจากคุณสมบัติที่คำนวณยังคงเหมือนเดิมโดยไม่คำนึงถึงจำนวนครั้งที่เรียก ซึ่งหมายความว่าทุกครั้งที่เรียกค่าสุดท้ายจะถูกอัปเดตสำหรับทุกคน ในขณะที่เมธอดเป็นฟังก์ชันดังนั้นทุกครั้งที่เรียกมันจะส่งคืนค่าที่แตกต่างกัน
รับ / ตั้งค่าในคุณสมบัติที่คำนวณ
ในส่วนนี้เราจะเรียนรู้เกี่ยวกับฟังก์ชัน get / set ในคุณสมบัติที่คำนวณโดยใช้ตัวอย่าง
ตัวอย่าง
<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>เราได้กำหนดช่องป้อนข้อมูลหนึ่งช่องซึ่งผูกไว้กับ fullnameซึ่งเป็นคุณสมบัติที่คำนวณได้ ส่งคืนฟังก์ชันที่เรียกว่าgetซึ่งให้ชื่อเต็มคือชื่อและนามสกุล นอกจากนี้เราได้แสดงชื่อและนามสกุลเป็น -
<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>ตรวจสอบสิ่งเดียวกันในเบราว์เซอร์
ตอนนี้ถ้าเราเปลี่ยนชื่อในกล่องข้อความเราจะเห็นสิ่งเดียวกันนี้ไม่ปรากฏในชื่อที่แสดงในภาพหน้าจอต่อไปนี้
มาเพิ่มฟังก์ชัน setter ในคุณสมบัติที่คำนวณด้วยชื่อเต็ม
<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>เราได้เพิ่มฟังก์ชัน set ในคุณสมบัติที่คำนวณด้วยชื่อเต็ม
computed :{
fullname : {
get : function() {
return this.firstName+" "+this.lastName;
},
set : function(name) {
var fname = name.split(" ");
this.firstName = fname[0];
this.lastName = fname[1]
}
}
}มีชื่อเป็นพารามิเตอร์ซึ่งไม่มีอะไรนอกจากชื่อเต็มในกล่องข้อความ ต่อมามีการแบ่งช่องว่างและมีการอัปเดตชื่อและนามสกุล ตอนนี้เมื่อเราเรียกใช้รหัสและแก้ไขกล่องข้อความสิ่งเดียวกันจะปรากฏในเบราว์เซอร์ ชื่อและนามสกุลจะได้รับการอัปเดตเนื่องจากฟังก์ชัน set ฟังก์ชัน get จะส่งคืนชื่อและนามสกุลในขณะที่ฟังก์ชัน set จะอัปเดตหากมีการแก้ไขอะไร
ตอนนี้สิ่งที่พิมพ์ในกล่องข้อความจะตรงกับสิ่งที่แสดงดังที่เห็นในภาพหน้าจอด้านบน