Vue的计算属性,监视属性代码理解

1.计算属性:在computed属性对象中定义计算属性的方法,在页面中使用{{方法名}}来显示计算的结果

 //计算属性
       computed:{
          // 计算属性值的一个方法,方法的返回值是属性值,初始化显示或者DATA数据发生改变时调用
          fullName1(){
              console.log('fullName1()')
              return this.firstName + ' '  + this.lastName
          }
       },
       fullName3: {
           //回调函数:1.自己定义的 2.没有调用的 3.最后执行了的
           get() {
               return this.firstName + ' ' + this.lastName
           },
           set(value) {
               const names = value.split(' ')
               this.firstName = names[0]
               this.lastName = names[1]
           }
       },

2.监视属性:通过vm对象的$watch()或watch配置来监视指定的属性,当属性变化时,回调函数自动调用,在函数内部进行计算

//监视属性
       watch:{
          firstName: function (value) {
              this.fullName2 = value + '    ' + this.lastName
          }
       }
   })
    //VM的一个实例,也是方法
    vm.$watch('lastName',function(value){
        this.fullName2 = this.firstName + '     ' +value

  

猜你喜欢

转载自www.cnblogs.com/muzi1024/p/10596137.html