计算属性:computed
姓<input type="text" v-model="name">//v-model="name"数据绑定
名<input type="text" v-model="namea">
全名:<p>{{mes}}</p> //{{mes}}:计算属性的属性名
export default {
data(){
return{
name:1,//上面数据绑定的实例
namea:2,//上面数据绑定的实例
}
},
computed:{
mes:{//mes:计算属性的属性名
get(){//get数据被读取时,就会执行
console.log("get调用")
console.log(this)
return this.name + "-" + this.namea
},
set(value){//set()数据被修改时,就会执行
console.log("set调用了",value)
const arr = value.split("-")//变成数组,然后
this.name = arr[0]//赋值
this.namea = arr[1]//赋值
}
}
}
}
监视属性
<input type="text" v-model="asa.name">//v-model="asa.name"数据绑定
export default {
data(){
return{
asa:{//对象
name:1,
sex:2
},
}
},
watch:{//watch:监视属性
asa:{ //asa:属性名
deep:true,//深度监视,可以监视到对象里面的值的变化
handler(newvalue,oldvalue){//handler:监视数据变化,第一个参数新的数据,第二个是之前的数据
console.log('as被修改了',newvalue,oldvalue)
}
}
}