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

Question

我有以下 vuejs 过滤器

import Vue from 'vue'

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

然后我称之为

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

但我想将参数 0 , 10 传递给 html 上的过滤器。有什么办法吗？

原文由 hidar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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>

原文由 Niklesh Raut 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

根据 文档，过滤器是 JavaScript 函数，因此它们可以接受参数，所以你应该能够做到：

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

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

原文由 Nora 发布，翻译遵循 CC BY-SA 4.0 许可协议