<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{fullName}} --- {{age}} 計算屬性 </div> </body> <script type="text/javascript"> let vm = new Vue({ el: '#app', data: { firstName: 'Dell', lastName: 'Less', age: 20 }, // 計算屬性, 緩存機制 computed: { //計算屬性的getter和setter方法 //數據渲染時會自動調用get方法 fullName: { get: function () { return this.firstName +' '+ this.lastName }, //數據變化時自動調用set方法 //現在再運行 vm.fullName = 'John Doe' 時，setter 會被調用，vm.firstName 和 vm.lastName 也會相應地被更新。 set: function(value) { let arr = value.split(' ') // 當fullName相關聯的數據發生變化時相當於重新調用get方法 this.firstName = arr[0] this.lastName = arr[1] } } } }) </script> </html>