<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 1、计算属性： 在computed属性对象中定义计算属性的方法 在页面中使用{{方法名}}来显示计算结果 2、监视属性： 通过vm对象的$watch()或watch配置来监视指定的属性 当属性变化时，回调函数自动调用，在函数内部进行计算 3、计算属性高级： 通过getter/setter实现对属性数据的显示和监视 计算属性存在缓存，多次读取只执行一次getter计算 --> <div id="app"> 姓：<input type="text" placeholder="First Name" v-model="firstName"/><br /> 名：<input type="text" placeholder="Last Name" v-model="lastName" /><br /> 姓名1（单向）：<input type="text" placeholder="Full Name1" v-model="fullName1"/><br /> 姓名2（单向）：<input type="text" placeholder="Full Name2" v-model="fullName2"/><br /> 姓名3（双向）：<input type="text" placeholder="Full Name3" v-model="fullName3"/><br /> </div> <script type="text/javascript" src="../js/vue.js" ></script> <script type="text/javascript"> //const常量 const vm=new Vue({ el:"#app", data:{ firstName:'A', lastName:'B', fullName2:'A B' }, computed:{ //计算属性的方法,方法的返回值作为属性值。 //执行条件：初始化显示的时候或data发生改变的时候调用 fullName1(){ return this.firstName+' '+this.lastName; }, fullName3:{ //回调函数（1.你定义的，2.你没有调，3.但最终它执行了）计算并返回结果 //当需要读取当前属性值时回调，根据相关的数据计算并返回当前属性的值 get(){ return this.firstName+' '+this.lastName; }, //当属性值发生改变时回调，更新相关的属性数据 //value：fullName3的最新值 set(value){ const names=value.split(' '); this.firstName=names[0]; this.lastName=names[1]; } } }, watch:{ //传参 (新的值,旧的值) 或 (旧的值) firstName:function(value){ this.fullName2=value+' '+this.lastName; }, /*lastName:function(value){ this.fullName2=this.firstName+' '+value; }*/ } }) vm.$watch('lastName',function(value){ this.fullName2=this.firstName+' '+value; }) </script> </body> </html>
重点：计算属性存在缓存