Vue 필터(filter)구현 및 응용 장면 상세 설명

1.간단 한 소개
Vue.js 는 일반적인 텍스트 포맷 에 사용 할 수 있 는 필터(filter)를 사용자 정의 할 수 있 습 니 다.
필 터 는 두 곳 에 사용 할 수 있 습 니 다.쌍 괄호 삽입 값 과 v-bind 표현 식(후 자 는 2.1.0+부터 지원 합 니 다).
필 터 는 JavaScript 표현 식 의 끝 에 추가 되 어야 합 니 다."파이프"기호 로 표시 합 니 다.

<!--        -->
{{ message | filter }}

<!--   `v-bind`   -->
<div v-bind:msg="message | filter"></div>

필터 함수 총 수신 식 의 값 을 첫 번 째 매개 변수 로 합 니 다.
상기 예 에서 filter 필터 함 수 는 message 의 값 을 첫 번 째 매개 변수 로 받 을 수 있 습 니 다.
1.1 필터 직렬 연결 가능

{{ message | filterA | filterB }}

이 예 에서 filter A 는 하나의 매개 변 수 를 받 는 필터 함수 로 정의 되 고 표현 식 message 의 값 은 매개 변수 로 함수 에 전 달 됩 니 다.그 다음 에 같은 매개 변 수 를 받 는 필터 함수 filter B 를 계속 호출 하여 filter A 의 결 과 를 filter B 에 전달 합 니 다.
1.2 필 터 는 JavaScript 함수 로 인 자 를 받 을 수 있 습 니 다.

{{ message | filterA('arg1', arg2) }}

filter A 는 세 개의 인 자 를 받 는 필터 함수 로 정의 되 었 습 니 다.그 중에서 message 의 값 은 첫 번 째 매개 변수 이 고 일반 문자열 인'arg 1'은 두 번 째 매개 변수 이 며 표현 식 arg 2 의 값 은 세 번 째 매개 변수 입 니 다.
2.vue-cli 에서 전역 필 터 를 정의 합 니 다.
문법:Vue.filter(filter Name,()=>{return//데이터 처리 결과})
eg:

<div id="app">
  <h3>{{userName | addName}}</h3>
</div>
<script>
//    ：       ，             ；
//    ：    ，         	
Vue.filter("addName",(value)=>{											            
    return "my name is" + value
})
let vm = new Vue({
    el:"#app",
  	data:{
     userName:"  " 
    }
})
</script>

2.1 실제 개발 사용
전역 필 터 는 항상 데이터 수식 에 있 습 니 다.일반적으로 우 리 는 처리 함 수 를 추출 하여 하나의.js 파일 에 통일 적 으로 놓 습 니 다.

// filter.js   

let filterPrice = (value) => {
	return '   ' + value + ' '
}
let filterDate = (value) => {
    return value + ' '
}

export default {filterPrice,filterDate}

main.js 에서 위의 filter.js 파일 을 가 져 오고 모든 구성 요소 에서 filter.js 파일 을 가 져 올 수 있 습 니 다.그러나 전체 필터 에 있어 서 는 main.js 에서 정의 하 는 것 이 좋 습 니 다.가 져 온 것 은 대상 이 므 로 Object.keys()방법 을 사용 하여 key 로 구 성 된 배열 을 얻 고 데 이 터 를 옮 겨 다 니 며 key 를 전체 필터 의 이름 으로 합 니 다.뒤쪽 은 key 에 대응 하 는 처리 함수 입 니 다.모든 구성 요소 에서 전역 필 터 를 사용 할 수 있 습 니 다.

//main.js
 
//   2     ，     
import * as filters from './utils/filter/filter'
// import {filterPrice,filterDate} from './utils/filter/filter'
 
console.log(filters)
 
Object.keys(filters.default).forEach((item)=>{
  Vue.filter(item,filters.default[item])
})
 
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

3.구성 요소 에 전역 필 터 를 사용 합 니 다:

// test.vue

<template>
  <div>
    <input type="text" v-model="filterCount" >
    <div>{{filterCount | filterPrice}}</div>
    <div>{{filterCount | filterDate}}</div>
  </div>  
</template>

<script>
export default {
  data(){
    return {
      filterCount:1500
    }
  },
}
</script>

3.vue-cli 에서 부분 필 터 를 정의 합 니 다.

// test.vue

<template>
  <div>
    <input type="text" v-model="filterCount" >
    <div>{{filterCount | filterPrice}}</div>
    <div>{{filterCount | filterDate}}</div>
  </div>  
</template>

<script>
export default {
  data(){
    return {
      filterCount:1500
    }
  },
}
</script>

4.흔 한 사용 장면
4.1 형식 날짜(시간)
장면 1:백 엔 드 전송 시간:2019-11-19T 04:32:46Z
설치

// main.js

import moment from 'moment'
//        --     
Vue.filter('format',function(val,arg){
  if(!val) return;
  val = val.toString()
  return moment(val).format(arg)
})

// test.vue

<template>
   <div class="filter">{{time | format('YYYY-MM-DD HH:MM:SS')}}</div>  
</template>

<script>
export default {
  data(){
    return {
      time:'2019-11-19T04:32:46Z'
    }
  }
}
</script>

총결산
Vue 필터(filter)구현 및 응용 장면 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue 필터(filter)구현 에 관 한 내용 은 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!