简介
1.计算属性 (将数据在computed对象中“加工”后,再显示出来)
在computed属性对象中定义计算属性的方法
在页面中使用{{方法名}}来显示计算的结果
2.监视属性: (注意:要对变化的对象进行监视.监视有两种方式)
通过通过vm对象的$watch()或watch配置来监视指定的属性
当属性变化时,回调函数自动调用,在函数内部进行计算
代码示例
<div id="demo">
姓: <input type= "text" placeholder="FirstName" v-model="firstName"><br>
名: <input type="text" placeholder="LastName" 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 src="../js/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el:"#demo",
data:{
firstName:"张",
lastName:"三丰",
fullName2:"张三丰",
fullName3:"张三丰"
},
//计算属性对象(显示时间:在初始化显示和data数据更新时)
computed:{
fullName1: function(){
return this.firstName + this.lastName;
}
},
// 监视方式一: watch属性
watch:{
firstName: function(value) { //监视对象:firstName
console.log(this); //this指的是 vue对象的实例vm
this.fullName2 = value + this.lastName;//在lastName输入框中输入时,此处的lastName属性值依然是初始化值
}
}
})
//监视方式二 实例方法&watch()
vm.$watch("lastName", function(newValue,oldValue){
this.fullName3 = this.firstName + newValue;//在firstName输入框中输入时,此处的firstName属性值依然是初始化值
})
//综合上述,有时候,计算属性computed的效率要比监听属性的效率要高.
// (监听属性在其他地方也会有应用)