如何将参数传递给 vuejs 过滤器？答案

【问题标题】：How to pass an argument to vuejs filters?如何将参数传递给 vuejs 过滤器？
【发布时间】：2018-04-14 19:18:51
【问题描述】：

我有以下 vuejs 过滤器

import Vue from 'vue'

Vue.filter('truncate', function (value) {
   return value.substring(0, 10)
})

然后我称之为

<p> {{filename | truncate}} </p>

但我想将参数 0、10 传递给 html 上的过滤器。有没有办法做到这一点？

【问题讨论】：

这直接在文档中介绍。 vuejs.org/v2/guide/filters.html

标签： vue.js vuejs2

【解决方案1】：

尝试像这样在 vuejs 过滤器中将额外的值作为参数传递

var app = new Vue({
    el: "#vue-instance",
    filters:{
      currency: function(value,arg1){
        return arg1+value;
      }
    },
    data: {
    },
    mounted() {
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.1/vue.js"></script>
<div id="vue-instance">
  {{123 | currency('$') }}
</div>

文档说：Filter-Argument-Syntax-changed

在你给定的例子中

Vue.filter('truncate', function (value,start,end) {
   return value.substring(start, end)
})

var app = new Vue({
    el: "#vue-instance",
    data: {
    },
    mounted() {
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.1/vue.js"></script>
<div id="vue-instance">
  {{ 'this is niklesh.raut' | truncate(0,10) }}
</div>

【讨论】：

【解决方案2】：

根据documentation，过滤器是JavaScript函数，因此它们可以接受参数，所以你应该可以这样做：

<p> {{ filename | truncate(10) }} </p>

文件名的值将被传递到第一个参数中。 10 将作为第二个参数传递给truncate

【讨论】：

【解决方案3】：

只需扩展并使用参数调用您的构造：

Vue.filter('truncate', function (value, from, count) {
  return value.substring(from, count)
})

<p>{{filename | truncate(0, 10)}}</p>

【讨论】：