VUE:计算属性和监视

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

回到顶部