day03

监听

watch:{
 //浅监听
  msg(newVal,oldVal){
       console.log(newVal,oldVal)
 },
 //深监听
 json:{
   //这个名字不能更改
     handler(a){
     console.log(a)
     },
     //主要通过deep属性
    deep:true
 },
    注:不建议使用深监听，通常转换为浅监听方式
 }
​

深监听一般不建议使用，因为深监听只能获取到最新的数据，获取不到原来的数据。

一般将深监听转换为浅监听使用，利用beforemount结合methods使用转换为浅监听

过滤器

<div id='app'>
<!-- | 管道符  -->
{{tel | filterTel}}
</div>

1.全局标识
Vue.filter('filterTel',(tel)=>{
    return tel.slice(0,3)+'****'+tel.slice(7)
})
​
2.局部标识
filters:{
    filter(time){
        return tel.slice(0,3)+'****'+tel.slice(7)
    }
}

计算属性

 computed:{
    title(){
      let sum=0;
       this.list.forEach(item=>{
       if(item.check){
         sum+=item.num*item.price
         }
        })
       return sum.toFixed(2)
       }
   },