3.computed:{...} 是vue专有的一个计算属性 和 一些其它的常用属性

computed(中文意思:计算)
是vue专有的一个计算属性
  当数据发生变化的时候,通过变化的数据,做另一件事
只要使用, 一开始就会执行一次,之后只要数据发生变化就执行
 
定义:
  函数( ){
    return 是什么,显示就是什么
  }
使用:
  {{函数名}}
注意:
  函数名不要跟data中的数据一致
 
computed 的静态方法之:get、set
computed:{
    all:{
        get(){
            return this.arr.every(e=>e.checked);
        },
        set(newValue){
            return this.arr.forEach(e=>e.checked = newValue)
        }
    }
}
/* 
    get(){
        //获取的时候
    }
    set(newValue){
        //修改的时候
        newValue就是改变之后的结果
    }
    当使用get、set的时候,那么computed中定义的属性,为一个对象
    当不使用get、set的时候,computed中定义的属性是可以为函数
*/
 

methods(中文意思:方法们)
methods:{
  fn(){...},
  fn2(){...}
}

el:'#app'

data:数据

 watch 指定数据的监听器
/*
    watch(指定数据的监听器):
        当指定数据发生变化的时候触发,一开始是不会触发的,只有数据变化才触发
    第一种写法:
        watch:{
            要监听的数据名(新的数据,更新之前的数据){
                只能监听一层,深层就监听不到
                []一层 -> [{}]多层
            }
        }
    
    第二种写法:
        watch:{
            要监听的数据名:{
                handler(新的数据,更新之前的数据){
                },
                deep:true  深度监听
            }
        }
*/
比如:
watch:{
  arr:{
    handler(v){
      localStorage.setItem('data',JSON.stringify(v));
    },
    deep:true
  }
}
 

猜你喜欢

转载自www.cnblogs.com/MrZhujl/p/10223164.html