vue 는 여러 필 터 를 한 파일 에 봉 인 된 코드 에 대한 상세 한 설명

2222 단어 vue필터포장 하 다
여기 서 vue 필 터 를 한 파일 에 어떻게 밀봉 하 는 지 에 대해 서 만 간단하게 검토 할 수 있 습 니 다.물론 여러 종류의 필 터 를 밀봉 한 다음 에 필 터 를 사용 해 야 하 는 파일 에서 재 활용 할 수 있어 서 매우 편리 합 니 다.
1.
우선 파일 구조 입 니 다.먼저 filers.vue 와 관련 되 어 있 습 니 다.(필터 파일 참조)
在这里插入图片描述
파일 코드:

<template>
 <div class="chart-container">
  <ul>
    <li v-for="texts in text" >{{texts | MoneyFormat}}</li>
  </ul>
 </div>
</template>

<script>
import filter from '../filters/index'

export default {
 data() {
  return {
   text: ['holle','sdfs','fuck']
  };
 },
};
</script>
다음은 필 터 를 봉인 하 는 파일 filers 의 index.js 파일 입 니 다.
在这里插入图片描述
파일 코드:

//vue       

//      ：             
let MoneyFormat = value => {
 if (value) {
  let str = value.toString();
  //    ，             ，     ，         
  let newArr = str.split(" ").map(ele => {
   console.log(ele.slice(1))
   return ele.charAt(0).toUpperCase() + ele.slice(1)
  });
  return newArr.join(" ")
 }

}


//      ：      '22'       
let timeFilter = function (value) {
 return value + "22"
}

//        
export { MoneyFormat,timeFilter }
마지막 으로 main.js 파일 에 전역 필 터 를 도입 합 니 다.
在这里插入图片描述
파일 코드:

//     
import * as filters from './filters/index'
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})
2.
마지막 으로 파일 구성 도 를 첨부 합 니 다:
在这里插入图片描述
총결산
vue 가 여러 필 터 를 한 파일 에 봉인 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue 필터 패키지 파일 의 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 바 랍 니 다!
2019 핸드폰 번호 JS 정규 표현 식 검증 실례 코드
js 버튼 을 누 르 면 배경 색 을 무 작위 로 생 성 합 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage