一、计算属性
1) 在 computed 属性对象中定义计算属性的方法
2) 在页面中使用{{方法名}}来显示计算的结果
二、监视属性
1) 通过通过 watch 配置或者vm 对象的$watch()或 来监视指定的属性
2) 当属性变化时, 回调函数自动调用, 在函数内部进行计算
三、计算属性的get/set
1) 通过 getter/setter 实现对属性数据的显示和监视
2) 计算属性存在缓存, 多次读取只执行一次 getter 计算
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
姓:<input type="text" v-model="name_a"><br/>
名:<input type="text" v-model="name_b"><br/>
姓名1:<input type="text" v-model="name"><br/>
姓名2:<input type="text" v-model="name2"><br/>
姓名3:<input type="text" v-model="name3">
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el:'#app',
data(){
return {
name_a:'A',
name_b:'B',
name2:'A B'
}
},
//计算属性:方法的返回值作为属性值
computed:{
name(){
return this.name_a+' '+this.name_b
},
name3:{
//获取值
get:function(){
return this.name_a+' '+this.name_b
},
//监视
set:function(val){
const name = val.split(' ')
this.name_a = name[0]
this.name_b = name[1]
}
}
},
//监视方法1 watch配置
watch:{
name_a:function(val){
this.name2 = val + ' ' + this.name_b
}
}
})
//a.b.c:a对象的b属性的值c
//监视方法2 vm.$watch('a.b.c',function(newVal, oldVal){})
vm.$watch('name_b',function(val){
this.name2 = this.name_a+' '+val
})
</script>
</body>
</html>