[vuejs] filter 를 이용한, data, price format 변경

vuejs 에서 filter 를 이용한, data, price format 변경 방법입니다.

 

* 아래 사이트 참조
https://www.npmjs.com/package/vue-moment

 

vue-moment 를 사용하기 위해, 아래와 같이 import 추가.

import moment from 'moment'

 

 

vuejs 화면에서 아래와 같이 이용.

 

formatDate 만 할 경우, formatDate(value) 를 호출하며, formatDate 값이 value 가 됩니다.

formatDate('YYYY/MM/DD HH:mm') 할 경우, formatDate(value, format) 를 호출하며, formatDate 값이 value,  format 값이 'YYYY/MM/DD HH:mm' 가 됩니다.

 

 

 
{{ someDate | formatDate }}
{{ someDate | formatDate('YYYY/MM/DD HH:mm') }}
{{ somePrice | formatPrice }}//숫자 자릿수 마다 , 처리
 
<script>
export default {
    data () {
        return {
        }
    },
    filters: {
        formatDate: function (value) {
            if (value) {
                return moment(value).format('YYYY/MM/DD HH:mm:ss')
            }
        },
        formatDate: function (value, format) {
            if (value) {
                return moment(value).format(format)
            }
        },
        formatPrice(value) {
            let val = (value/1)
            return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
        },
    },
}
</script>