vuejs 필터에 인수를 전달하는 방법

vuejs 필터에 인수를 전달하는 방법

다음 vuejs 필터가 있습니다.

import Vue from 'vue'

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

그럼 그걸 내가 부르는 거야

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

하지만 이 논쟁은 넘어가고 싶습니다.0,10html의 필터로 이동합니다.어떻게 할 수 있을까요?

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>

설명서에 따르면 필터는 JavaScript 함수이므로 인수를 사용할 수 있으므로 다음을 수행할 수 있습니다.

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

파일 이름 값은 첫 번째 인수에 전달됩니다. 10은 다음 인수에 전달됩니다.truncate그 두 번째 의론으로서

다음 매개 변수를 사용하여 확장 및 호출만 하면 됩니다.

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

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

언급URL : https://stackoverflow.com/questions/47072377/how-to-pass-an-argument-to-vuejs-filters