computed 计算属性【选项】
computed 属性会基于它所依赖的数据进行缓存
每个 computed 属性，只有在它所依赖的数据发生变化时，才会重新取值；
也就是说当它所依赖的数据没有发生改变的的时候，再次访问立即返回上次的计算结果，而没有重新计算
methods 方法选项
methods每次调用的时候都会执行
也就是说只要调用methods中的方法，那么此方法就是再次重新执行
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/vue.js" type="text/javascript">
</script>
</head>
<body>
<div id="app">{{result}}
<br />
<input type="text" v-model.number="a"/><br>
<br />
<input type="text" v-model.number="b"/><br>
<div id="">
{{c}}
</div>
<div id="">
{{remsg}}
</div>
<input type="text" v-model="remsg">
<div id="">
{{remsg2}}
</div>
<div id="">
{{reverseMsg()}}
</div>
<p><label>姓：</label><input type="text" v-model='firstName'></p>
<p><label>名：</label><input type="text" v-model='lastName'></p>
<p>你的姓名是: {{ fullName }}</p>
<p>你的姓名是: {{ fullName }}</p>
<p>{{getFullName}}</p>
<p>{{now}}</p>
<p>{{now2()}}</p>
<p>{{now2()}}</p>
<p>{{now2()}}</p>
<p>{{now}}</p>
<p>{{now2()}}</p>
<p>{{now2()}}</p>
<br>
<br>
<br>
<br>
<!--html代码-->
<div id="">
{{time}}
</div>
<div id="">
{{time2}}
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
a: 1,
b: 2,
c: '',
msg: "格莱科技",
firstName: '',
lastName: '',
fullName: '',
time: '',
time2: ''
},
//计算选项【属性】
computed: {
now: function(){
setInterval(() => {
this.time2 = this.now
}, 500);
return Date.now()
},
getFullName: function(){
// this.fullName = this.firstName+this.lastName X
return this.firstName+this.lastName
},
result: function(){
return this.a+this.b;
},
// remsg: function(){
// return this.msg.split("").reverse().join("")
// },
remsg: {
get: function(){
return this.msg+"1111";
},
//val === get方法得到的值
set: function(val){
this.msg = val+"222";
}
},
remsg2: function(){
return this.remsg;
}
},
methods: {
now2: function(){
console.log(Date.now()+"aa")
setInterval(() => {
this.time = this.now2()
}, 500);
return Date.now()
},
reverseMsg () {
return this.msg.split("").reverse().join("")
}
},
// 监听选项[属性]
watch: {
a: function(newVal, oldVal){
console.log(
newVal,
oldVal);
this.c = newVal + this.b;
},
// firstName: function (val) {
// this.fullName = val + ' ' + this.lastName
// },
// lastName: function (val) {
// this.fullName = this.firstName + ' ' + val
// }
}
});
</script>
</body>
</html>
案例效果：
time2会一直不变化
time会一直变化
vue入门学习视频 10元
联系方式QQ：1718202383
vue入门学习视频.png
vue影院视频+源码 10元
联系方式QQ：1718202383
image.png
