0%

Vue过滤器

发布于 / 分类: vue前端开发快速入门与专业应用 / 暂无评论 / 阅读量 84

最后更新于 2019年11月20日

由于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 过渡
  • 滑动验证
    »
  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao