VUE:计算属性和监视
<!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>
重点:计算属性存在缓存
以上是 VUE:计算属性和监视 的全部内容, 来源链接: utcz.com/z/380304.html