如何在 vuejs webpack 加载器模板中创建自定义过滤器？答案

【问题标题】：How to create custom filter in vuejs webpack loader template?如何在 vuejs webpack 加载器模板中创建自定义过滤器？
【发布时间】：2016-03-09 15:05:03
【问题描述】：

我在文档中看到过。它告诉创建像

这样的过滤器

Vue.filter('reverse', function (value) {
  return value.split('').reverse().join('')
})

我尝试在 vuejs webpack 加载器中创建过滤器为

export default {
  filter: {
    reverse: function(value) {
      return value.split('').reverse().join('')
    }
  }
}

但它不起作用。任何人都可以建议它应该如何实施。

【问题讨论】：

标签： webpack loader vue.js

【解决方案1】：

我相信你需要filters 而不是filter：

export default {
  filters: {
    reverse: function(value) {
      return value.split('').reverse().join('')
    }
  }
}

【讨论】：

【解决方案2】：

根据编译的文件vue.common.js中的函数checkFilters

 /**
 * Check read/write filter stats.
 */

checkFilters: function checkFilters() {
  var filters = this.filters;
  if (!filters) return;
  var i = filters.length;
  while (i--) {
    var filter = resolveAsset(this.vm.$options, 'filters', filters[i].name);
    if (typeof filter === 'function' || filter.read) {
      this.hasRead = true;
    }
    if (filter.write) {
      this.hasWrite = true;
    }
  }
},

所以如果是单向过滤器，它一定是一个函数。如果是双向过滤器，它是一个具有读取属性的对象，它至少是一个函数。

所以，在一个vue文件中，如果你想自定义一个过滤器，你应该这样写：

export default {
  filters: {
    "reverse": function(value) {
      return value.split('').reverse().join('')
    }
  }
}

如果是双向过滤器，你应该这样写：

export default {
  filters: {
    "reverse": { 
      read: function(value) {
        return value.split('').reverse().join('')
      },
      write: function(val, oldVal) { //this is not neccessary
       //something you want to return
      }
    }
  }
}

【讨论】：