Vue.js
맞춤 필터

통사론

• Vue.filter(name, function(value){}); //기본
• Vue.filter(name, function(value, begin, end){}); // 값을 래핑하는 Basic
• Vue.filter(name, function(value, input){}); //동적
• Vue.filter(name, { read: function(value){}, write: function(value){} }); // 양방향

매개 변수

양방향 필터

two-way filter 를 사용하면 view 와 model 간에 동일한 데이터의 값을 변경하는 단일 filter 대해 read 및 write 작업을 할당 할 수 model .

//JS
Vue.filter('uppercase', {
    //read : model -> view
    read: function(value) {
        return value.toUpperCase();
    },

    //write : view -> model
    write: function(value) {
        return value.toLowerCase();
    }
});

/*
 * Base value of data: 'example string'
 *
 * In the view : 'EXAMPLE STRING'
 * In the model : 'example string'
 */

기본

에서 사용자 정의 필터 Vue.js 단일 함수 호출에서 쉽게 만들 수 있습니다 Vue.filter .

//JS
Vue.filter('reverse', function(value) {
    return value.split('').reverse().join('');
});

//HTML
<span>{{ msg | reverse }}</span> //'This is fun!' => '!nuf si sihT'

모든 사용자 정의 필터를 별도의 파일 (예 : ./filters )에 저장하면 다음 응용 프로그램에서 코드를 재사용하기 쉽습니다. 이런 식으로하면 JS 부분 을 대체 해야합니다.

//JS
Vue.filter('reverse', require('./filters/reverse'));

나만의 begin 및 end 래퍼도 정의 할 수 있습니다.

//JS
Vue.filter('wrap', function(value, begin, end) {
    return begin + value + end;
});

//HTML
<span>{{ msg | wrap 'The' 'fox' }}</span> //'quick brown' => 'The quick brown fox'