vuejs 自定义过滤器的疑问

Question

小弟最近在学vuejs，之后照着官方模板自己写了个todo-list的小程序。在写自定义过滤器的时候遇到一些问题。

官方教程说可以用全局方法 Vue.filter() 注册一个自定义过滤器。于是我将过滤器注册在了main.js当中。过滤器的作用是筛选完成的或者没有完成的todos。

Vue.filter('filterFinish',function (value,type) {
  if(type == 'All'){
    return value;
  }else if(type == 'Finished'){
    if(value.length==0){
      return [];
    }else{
      var a = [];
      for(var i =0;i<value.length;i++){
        if(value[i].isFinished==true){
          a.push(value[i]);
        }
      }
      return a;
    }
    
  }else{
    if(value.length==0){
      return [];
    }else{
      var a = [];
      for(var i =0;i<value.length;i++){
        if(value[i].isFinished==false){
          a.push(value[i]);
        }
      }
      return a;
    }
  }
})

然后我在app.vue中使用这个过滤器

<li v-for='item in (items | filterFinish "All")' :class="{'finished':item.isFinished}" @click='toggleFinish(item)'>
    <span>{{ item.label }}</span>
    <button @click='removeTodo($index)' class="removeButton">X</button>
  </li>

这时候就报错了。

自定义filter在组件中该怎么用呢？

Answer 1

migration
在v-for上用过滤器的新旧写法都在上面

Answer 2

不能这么写了，现在只能写在{{}}中了。如果要这样写，只能给组件computed了。。。我也是刚刚处理了limitBy。郁闷了。

Answer 3

你是不是升级到vue2.0版本了，Vue 2.x 中，过滤器只能在 mustache 绑定中使用。为了在指令绑定中实现同样的行为，你应该使用计算属性。