Vue中computed的set和get方法
阿新 • • 發佈：2018-10-16
拆分 ack data his col ted this mpat idt
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <!--vue.js 引入 --> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 </head> 11 <body> 12 <div id="app"> 13 first name: <input type="text" v-model="firstName"> 14 <br> 15 second name: <input type="text" v-model="lastName">16 <br> 17 full name: <div>{{fullName}}</div> 18 </div> 19 20 <script> 21 var app = new Vue({ 22 el: ‘#app‘, 23 data () { 24 return { 25 firstName: ‘‘, 26 lastName: ‘‘ 27 } 28 }, 29 computed: { 30// 輸入firstName和lastName自動拼成fullName 31 // 方法：1 32 /*fullName: function () { 33 return this.firstName + ‘ ‘ + this.lastName 34 }*/ 35 // 方法：2 36 /*fullName: { 37 get: function () { 38 return this.firstName + ‘ ‘ + this.lastName 39 } 40 }*/ 41 42 // 輸入fullName後自動拆分成兩個name 43 fullName: { 44 get: function () { 45 return this.firstName + ‘ ‘ + this.lastName 46 }, 47 set: function (fullName) { 48 var arr = fullName.split(‘ ‘); 49 // 以空格來分，將一個字符串分割成了兩個字符串 50 this.firstName = arr[0] 51 this.lastName = arr[1] 52 } 53 } 54 } 55 }) 56 </script> 57 </body> 58 </html>
結果如圖：
Vue中computed的set和get方法