[Vue + typescript] filter 사용하기

VUE.JS 목록

 

src/filters/index.ts

import { Vue } from 'vue-property-decorator'
import moment from 'moment'

/**
 * 날짜포맷 변경
 */
Vue.filter('date', (value: string, param = 'YYYY-MM-DD') => {
  return moment(value).format(param)
})

/**
 * 화폐로
 */
Vue.filter('toCurrency', (value: number) => {
  return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
})

/**
 * 숫자로
 */
Vue.filter('toNumber', (value: string) => {
  return Number(value.replace(/[^0-9.-]+/g, ''))
})

/**
 * 디폴트값 부여
 */
Vue.filter('default', (value: string, defaultValue: number | string) => {
  if (!value) return defaultValue
  return value
})

 

 

filter 주입

<template>
  <v-app>
    <hello-world />
  </v-app>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import HelloWorld from 'HelloWorld'
import '@/filters/index'

@Component
export default class App extends Vue {
  
}
</script>

 

 

 

사용하기

<template>
  <div>
    <p>총 {{ count | default(0) }} 개</p>
  </div>
</template>

<script lang="ts">
import { Vue } from 'vue-property-decorator'

@Component
export default class TsrGrid extends Vue {
}
</script>

 

 

 

VUE.JS 목록