<!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>