计算属性computed
计算属性，方法名可以直接在对象中使用.这个属性是通过计算得出的。 这个方法中的任意属性改变，都会触发这个方法 使用场景：希望把一些计算的业务逻辑放在方法中，例如：全名计算、地址计算、购物车合计
下面的示例，我们使用了三种方式：
-
使用方法实现
-
使用vue的computed读写方式实现
-
使用vue的computed只读方式实现
注意：推荐使用computed的方式。有缓存机制。在页面重复调用多次的情况下，只执行一次
<body>
<div id="app">
姓：<input type="text" v-model="firstName"> <br>
名：<input type="text" v-model="lastName"> <br>
全名：<input type="text" v-model="getFullName()"><br>
全名：<input type="text" v-model="fullName"><br>
全名：<input type="text" v-model="fullNameReadOnly"><br>
</div>
</body>
<script src="./js/vue2.js"></script>
<script>
var app = new Vue({
el: '#app', // 用于指定当前vue实例为哪个容器使用，值为css选择器字符串
data() {
return {
firstName:'张',
lastName:'三',
}
},
methods:{
getFullName(){
return this.firstName+"-"+this.lastName
}
},
computed:{
fullName:{
// 读
get(){
return this.firstName+"-"+this.lastName
},
// 写
set(value){
this.firstName = value.split("-")[0]
this.lastName = value.split("-")[1]
}
},
// 只读方式的简写
fullNameReadOnly(){
return this.firstName+"-"+this.lastName
}
}
});
</script>侦听属性watch
// 前面在data中要定义好两个属性：plan、isSunny
watch:{
// 监听isSunny属性，当isSunny属性改变时，执行对应的代码
isSunny:{
immediate:true, // 开启初始化调用
deep:true, // 开启深度监视
handler(newVal,oldVal){
// 晴天打篮球，否则写代码
this.plan = this.isSunny ? "打篮球" : "写代码"
console.log('新的数据：'+newVal);
console.log('旧的数据：'+oldVal);
}
},
// 监听复杂数据的某个属性，这也是一种简写方式
"person.name"(newVal,oldVal){
console.log('新的数据：'+newVal);
console.log('旧的数据：'+oldVal);
}
}-
被监视的属性发生改变时，调用回调函数，执行相关操作
-
配置
immediate:true实现初始化调用 -
监视的属性须存在才能进行监视
完整代码
<body>
<div id="app">
<div>
<input type="text" v-model="firetName">
<input type="text" v-model="lastname"><br>
<input type="text" v-model="getFullName()"><br>
<input type="text" v-model="fullNameReadonly"><br>
<input type="text" v-model="funName">
</div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
var app=new Vue({
el:"#app",
data(){
return{
firetName:"科比",
lastname:"布莱恩特",
isSunny:true,
person:{
age:18,
name:'光头'
}
}
},
methods:{
getFullName(){
return this.firetName+"."+this.lastname
}
},
computed:{
//只读方式的简写,写到computed,有缓存
fullNameReadonly(){
return this.firetName+"."+this.lastname
},
funName:{
get(){
return this.firetName+"."+this.lastname
},
set(value){
this.firetName=value.split(".")[0]
this.lastname=value.split(".")[1]
}
}
},
watch:{
//表示要对isSunny这个属性进行侦听
isSunny(newVal,oldval){
console.log("改变了",oldval,newVal);
},
//深度监听可以用来监听整个随性的改变,但要慎用,因为
person:{
immediate:true,
deep:true,
handler(newVal,oldval){
console.log("改变了",newVal,oldval);
}
},
"person.name"(newVal,oldval){
console.log("我也侦听到了");
}
}
})
</script>