木灵鱼儿

木灵鱼儿

阅读：1831

最后更新：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过滤器
木灵鱼儿

木灵鱼儿

发布了 678 篇文章获得点赞 1获得阅读 1831

版权申明

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

one
two
three

关于作者

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

相关文章

使用howler.js封装一个网页游戏音乐管理器使用howler.js封装一个网页游戏音乐管理器
实现一个点击空白区域关闭显示的自定义指令实现一个点击空白区域关闭显示的自定义指令
使用vue2.7的一些踩坑事项使用vue2.7的一些踩坑事项
实现一个自动高度的输入框实现一个自动高度的输入框
解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译