【2021夏紀中游記】2021.8.11模擬賽
阿新 • • 發佈：2021-08-11
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <p>{{firstName+'•'+lastName}}</p> <p>----------函式----------</p> <p>{{getFullName()}}</p> <p>{{getFullName()}}</p><!-- 會再次執行呼叫函式運算 --> <p>----------計算屬性----------</p> <p>{{fullName}}</p> <p>{{fullName}}</p><!-- 先進行檢查快取,存在則直接拿第一次計算的快取,不再進行再次運算 --> <p>{{fullName_}}</p> <p>{{totalScore}}</p> </div> <script src="js/vue.3.2.2.js"></script> <script> // 1、建立Vue的例項物件 const app = Vue.createApp({ data(){//定義資料 return { msg:'你好！', firstName: '喬治', lastName:'希爾', members:[ {id:1,name:"張三",score:13232}, {id:2,name:"李四",score:14232} ] } }, //計算屬性 computed:{ /*細節:本質上還是屬性,寫法如函式,命名如屬性*/ fullName(){ console.log("========fullName=========") return this.firstName+'•'+this.lastName; }, fullName_:{ set(arg1){ console.log("-------set()--------"); const nameArr = arg1.split("•"); this.firstName=nameArr[0]; }, get(){ console.log("------get()-------"); return this.firstName+'•'+this.lastName; } }, totalScore(){ let total=0; for(let member of this.members){ total+=member.score; } return total; } }, methods:{ getFullName(){ console.log("---------getFullName-----------"); return this.firstName+'•'+this.lastName; } } }).mount('#app'); </script> </body> </html>