<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>if判断</title> </head> <body> <div id="app"> <span>1-{{name}}</span><br> <span>2-{{addName()}}</span><br> <span>3-{{addName()}}</span><br> <span>4-{{addName2}}</span><br> <span>5-{{addName2}}</span><br> <span>6-{{time}}</span><br> <span>7-{{num}}</span><br> </div> </body> <script src="js/vue.js"></script> <script> var app=new Vue({ el:"#app", data:{ name:'ddddd', num:0 }, methods:{ // 方法 每次都会重新计算里面的操作 无缓存 addName:function(){ console.log('addName调用'); return "hello" + "-"+this.name; } }, computed:{ //计算 只有当依赖的数据改变时才重新计算 有缓存 在数据的基础上进行依赖 // addName2:function(){ // console.log('addName2调用！'); // return "hello"+ "-"+this.name; //只有当name值改变时 才从新调用addName方法 // }, addName2:{ get:function(){ console.log('addName2被调用'); return "hi"+"-"+this.name; }, set:function(name){ this.name=name } }, time:function(){ console.log('time调用！'); return new Date(); } }, watch:{ //监测 数据改变进行的操作 name:function(){ //监测 data里的数据改变时 进行的操作 console.log('检测到name发生改变！'); this.num=1; //data里的num +1 } } }); this.name='jinsuo' </script> </html>