• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

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
  • 本文分类:vue前端开发快速入门与专业应用
  • 本文标签:vuevue过滤器
  • 流行热度:已超过 136 人围观了本文
  • 最后更新:2019年11月20日 - 0时47分06秒
  • 发布日期:2019年11月9日 - 0时54分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码