Question

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

这样的过滤器

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

我尝试在vuejs webpack loader中创建过滤器

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

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

Answer 1

我认为您需要filters而不是filter：

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

Answer 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;
    }
  }
},

因此，如果它是单向过滤器，它必须是一个函数。如果它是一个双向过滤器，它是一个具有read属性的对象，至少在其中是一个函数。

所以，在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
      }
    }
  }
}

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

2 个答案: