<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>计算属性</title> <script src="../js/vue.js"></script> </head> <body> <div id="root"> 姓：<input type="text" v-model="firstName"><br><br> 名：<input type="text" v-model="lastName"><br><br> 姓名：<span>{{fullName}}</span> </div> <script> Vue.config.productionTip = false new Vue({ el:'#root', data:{ firstName:'张', lastName:'三' }, computed:{ fullName:{ get(){ return this.firstName + '-' + this.lastName }, set(value){ const arr = value.split('-') this.firstName = arr[0] this.lastName = arr[1] } } } }) </script> </body> </html>
效果：
总结：
计算属性：
定义：要用的属性不存在，需要通过已有属性计算得来。
原理：底层借助了Objcet.defineproperty()方法提供的getter和setter。
get函数什么时候执行？
初次读取时会执行一次
当依赖的数据发生改变时会被再次调用
优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
备注：
计算属性最终会出现在vm上，直接读取使用即可
如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
如果计算属性确定不考虑修改，可以使用计算属性的简写形式
new Vue({ el:'#root', data:{ firstName:'张', lastName:'三' }, computed:{ fullName(){ return this.firstName + '-' + this.lastName } } })
