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){} });
// 양방향
매개 변수
매개 변수 | 세부 |
---|---|
이름 | String - 호출 가능한 필터의 이름 |
값 | [콜백] 임의의 - 필터로 전달되는 데이터의 값 |
시작하다 | [콜백] 전달 된 데이터 앞에 오는 임의의 값 |
종료 | [콜백] 전달 된 데이터 뒤에 올 모든 값 |
입력 | [콜백] Any - 동적 결과를 위해 Vue 인스턴스에 바인딩 된 사용자 입력 |
양방향 필터
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'
Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow