vue计算属性,监视属性

计算属性: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)
            }
        }
}
  • 4
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值