베이스
사용자 정의 지시와 유사하게, 사용자 정의 필터는 글로벌 메소드 vue.filter ()에 등록 될 수 있으며, 이는 필터 ID와 필터 기능의 두 매개 변수를 취합니다. 필터 함수는 값을 매개 변수로 취하고 변환 된 값을 반환합니다.
vue.filter ( 'Reverse', function (value) {return value.split ( ''). reverse (). join ( '')})<!-'abc'=> 'cba'-> <span v-text = "message | reverse"> </span>
필터 기능은 여러 매개 변수를 수신 할 수 있습니다.
vue.filter ( '랩', 함수 (값, 시작, 종료) {return begin + value + end})<!-'hello'=> 'hello at at apj
양방향 필터
현재 필터를 사용하여 필터를 사용하여 값을 표시하기 전에 모델에서 값을 변환합니다. 그러나 모델에 다시 작성하기 전에보기 (<input> 요소)에서 값을 변환하는 필터를 정의 할 수도 있습니다.
vue.filter ( 'CurrencyDisplay', {// model-> view //`<input>`요소 읽기를 업데이트하기 전에 값을 형식화합니다. '') return isnan (번호) : parsefloat (number.tofixed (2))})동적 매개 변수
필터 매개 변수가 따옴표로 래핑되지 않으면 현재 VM 범위 내에서 동적으로 계산됩니다. 또한이 필터 기능 의이 필터 기능은 항상 VM을 가리 킵니다. 예를 들어:
<입력 v-model = "userInput"> <span> {{msg | concat userInput}} </span> vue.filter ( 'concat', function (value, input) {// 'input` ===`this.userinput'return value + input})위의 예는 비교적 간단하며 표현식을 사용하여 동일한 결과를 달성 할 수 있지만, 더 복잡한 논리에는 둘 이상의 문장이 필요하며 계산 된 속성 또는 사용자 정의 필터에 넣어야합니다.
내장 필터 필터 필터 및 Orderby 필터/정렬 수신 어레이가 속한 VUE 인스턴스의 현재 상태를 기반으로합니다.
이 기사는 "vue.js 프론트 엔드 구성 요소 학습 자습서"로 편집되었으며 모두가 배우고 읽을 수 있습니다.
vue.js 구성 요소에 대한 튜토리얼은 특수 주제 vue.js 구성 요소 학습 자습서를 클릭하여 학습하십시오.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.