木灵鱼儿

木灵鱼儿

阅读：1552

最后更新：2019/11/20/ 0:47:06

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的值会作为后面过滤器的参数再次过滤，以此类推。

文章分类 vue前端开发快速入门与专业应用
文章标签 vuevue过滤器
木灵鱼儿

木灵鱼儿

发布了 615 篇文章获得点赞 1获得阅读 1552

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three

关于作者

站点职位 博主
获得点赞 1
文章被阅读 1552

相关文章

vue-i18n 的使用方式vue-i18n 的使用方式
设计模式的7个设计原则设计模式的7个设计原则
第六章 设计模式第六章 设计模式
第五章 代码复用模式第五章 代码复用模式
第四章 对象的创建第四章 对象的创建