Vue过滤器

由于2.0版本取消了所有的内置过滤器,而且过滤器只能在插值中使用,也就是{{xxx}}中使用,格式为{{name | 过滤器}};通过一个管道符号将前面需要过滤的内容隔开,后面写一个函数用于过滤,过滤器会将name作为第一个参数传入这个函数中,并且还支持传参。

创建一个过滤器

全局过滤器

Vue.filter('deta',function(value){
  if(!data instanceof Data) return value;
  return value.toLocaleDateString();
});

通过Vue.filter创建一个全局过滤器,deta为过滤器名字,后面接一个函数,第一个则是管道符号前面的值,该方法的意思是,如果这个value不是Date对象下的实例,那么就直接返回这个对象,反之则将这个value转换成本地时间格式返回,一般为2019/11/9这种,然后使用的时候就是这样:

<div id="app">
    <p>{{date|deta}}</p>
</div>
var app = new Vue({
  el : '#app',
  data : {
    date : new Date()
  }
});

该方法还支持传入多个参数,但是其实用的还是参数接收,格式如下:

Vue.filter('deta',function(value,parameter){
   //parameter就是传入的参数
});
<div id="app">
    <p>{{date|deta(parameter)}}</p>
</div>

data()在括号里传入参数即可,你可以传数组,也可以传string,obj,甚至可以传动态参数,比如我们在vue的data里面添加一个flag:true的参数用于判断这个东西是否需要过滤,当然这个也只是一个例子

<div id="app">
    <p>{{date|deta(flag)}}</p>
</div>

需要注意的是如果是动态参数就不要加引号,如果不是则要加上引号,具体自行测试。

局部过滤

var app = new Vue({
  el : '#app',
  data : {
    date : new Date()
  },
  filters : {
    name : funciton(value){
      //局部过滤器
    }
  }
});

直接再vue对象里面加入filters参数,其他都一样,vue有一个规律,凡是全局有的,在局部里使用都加了一个s。

双向过滤器

除了动态参数外,其他的都是在元素渲染至dom前就进行过滤,并不影响到数据本身,也就是data里面的值不会发生变化,使用双向过滤就可以将data绑定到的属性进行写入。

Vue.filter('deta',{
  read : function(value) { //渲染到dom时
    if(!data instanceof Data) return value;
    return value.toLocaleDateString();
  },
  write : function(){  //写入到data时
    if(data instanceof Data) { 
      return value.toLocaleDateString();
    }
  }
});

实际上read和write没必要都要一样,比如人民币的换算,一般为了避免浮点数的运算,都是在服务器里存储整数的,一般以分为单位,已知1元=10角=1000分,以分为单位。

用户显示和输入都是以元为单位。

Vue.filter('money',{
  read : function(value) { //渲染到dom时
     return '¥:'+(value/1000);
  },
  write : function(){ //写入到data时
     return value*1000;
  }
});

var app = new Vue({
  el : '#app',
  data : {
    money : 5000
  }
});
<div id="app">
   <p v-bind="money">{{money|money}}</p>
</div>

2.0移除了这个东西,我日

连续过滤

<div id="app">
   <p v-bind:value="money">{{money | money | money}}</p>
 </div>

通过管道符号隔开,之前的过滤器return的值会作为后面过滤器的参数再次过滤,以此类推。

0

相关文章

微信收款码
微信收款码