<!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>
重点：计算属性存在缓存
原文地址：https://www.cnblogs.com/it-taosir/p/9886664.html
时间： 2024-11-06 07:13:27