Vue- 监听使用方法和过滤器

2022-10-12
山东
本文字数：1049 字
阅读完需：约 3 分钟

前言

今天是自学 VUE 整理知识点的第四天呢，今天整理一下过滤器，watch 监听的知识点~~~~
继续加油冲冲冲

过滤器

过滤器的作用:为页面中数据进行添油加醋
有两种: 局部过滤器全局过滤器
格式：
1.声明过滤器
2.{{数据|过滤器的名字}}

局部过滤器代码

局部⾃定义过滤器：关键用到的是使⽤filters 属性，第⼀种和第⼆种声明⽅式都可以去实现。

      Vue.component('myLi',{      template:`      `    });               var App={      data(){        return{          price:0,          msg:'hello filter'        }      },      template:`      <div>       <input type='number' v-model='price'  />       <h3>{{price | myCurrentcy}}</h3>       <h4>{{msg |myReverse    }}</h4>      </div>      `,      filters:{        //  声明过滤器        myCurrentcy:function(value){          return "￥"+value        }      }    };        new Vue({      el:'#app',      components:{        App,      },      template:`<App/>`    })

复制代码

全局过滤器

优点：在项目中经常使用过滤器对数据进行格式化后显示在页面上，比如日期格式转化，数值转换成状态文字等过滤器，如果在每个.vue 页面都复制同一个过滤器进行使用，虽然是没问题，但是如果过滤器方法中，需要追加新的情况判断或出现 Bug 时就要将每个.vue 内的过滤器进行修改，既费时又费力，所以为了项目维护，可以优先考虑定义全局过滤器

全局过滤器代码:

    Vue.filter('myReverse',function(value){      return value.split('').reverse().join('');          });`

复制代码

watch 监听

vue 提供了侦听属性 watch，可以很好的观察和侦听 vue 实例响应数据的变化。

基本的数据类型
基本的数据类型简单监听
复杂的数据类型深度监听

简单监听

通过 watch 方法：方法里有(新值，旧值)用来监听也可添加条件，当新值等于一个值时，输出其他值。*

复杂监听

对于复杂的监听事件使用 stus 进行深度监听*

  <button @click="stus[0].name='rose'">改变 </button>      <h4>{{stus[0].name}}</h4>  new Vue({        el:'#app',        data(){          return{          msg:'',          stus:[{name:'jack'}]          }        },             // 监听复杂数据类型 object array 深度监听            stus:{            deep:true,//深度监听            handler:function(newV,oldV){              console.log(newV[0].name);            }          }        }

复制代码

发布于: 刚刚阅读数: 6

默默的成长

关注

还未添加个人签名 2022-10-11 加入

还未添加个人简介

发布

暂无评论

创作场景

Vue- 监听使用方法和过滤器

前言

过滤器

局部过滤器代码

全局过滤器

watch 监听

简单监听

复杂监听

默默的成长

评论