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