[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, ''))
})

 

/src/views/Hello.vue

<template>
  <div>
    <tsr-sample-component></tsr-sample-component>
    Filter
    <hr />
    날짜 포맷: {{ '20221231' | date() }}
    <hr />
    날짜 포맷 인자: {{ '20221231' | date('YYYY년 MM월 DD일') }}
    <hr />
    화폐로: {{ 200000000 | toCurrency() }}
    <hr />
    숫자로: {{ '200,000,000' | toNumber() }}
  </div>
</template>

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

@Component
export default class TestView extends Vue {
  mounted () {
    console.log(this.$options.filters?.date('20221231'))
    console.log(this.$options.filters?.date('20221231', 'YYYY년 MM월 DD일'))
    console.log(this.$options.filters?.toCurrency(200000000))
    console.log(this.$options.filters?.toNumber('200,000,000'))
  }
}
</script>

 

결과

2022-12-31
2022년 12월 31일
200,000,000
200000000

 

 

 

VUE.JS 목록