Question

我有以下vuejs过滤器

import Vue from 'vue'

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

我称之为

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

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

Answer 1

尝试这样在vuejs过滤器中将额外值作为param传递

＆＃13;

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

＆＃13;

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

＆＃13;

文档说：Filter-Argument-Syntax-changed

在你给出的例子中

＆＃13;

Vue.filter('truncate', function (value,start,end) {
   return value.substring(start, end)
})

var app = new Vue({
    el: "#vue-instance",
    data: {
    },
    mounted() {
    }
})

＆＃13;

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

＆＃13;

Answer 2

根据documentation，过滤器是JavaScript函数，因此它们可以接受参数，因此您应该能够：

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

filename的值将传递给第一个参数。 10将作为第二个参数

传递给truncate

Answer 3

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

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

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

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

3 个答案: