vuejsフィルタに引数を渡すには？

Question

私は、次のvuejsフィルタ私はその後、

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

として呼び出す

import Vue from 'vue' 

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

を持っているが、私は、HTML上のフィルタに引数0、10に合格したいと思います。これを行う方法はありますか？

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>

ドキュメントでのparamとして余分な値を渡すために、このようにしてくださいと言う：あなたの特定の例では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>

Answer 2

documentationによると、フィルタは、あなたが行うことができるはずので、そのため彼らは、引数を取ることができ、JavaScriptの関数です：

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

ファイル名の値が最初の引数に渡されます。 10は、その2番目の引数としてtruncateに渡されます

Answer 3

だけ延長し、パラメータを使用して建設を呼び出します。

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

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