vuejs | filter | 숫자단위당 쉼표 표기하기

화폐 단위를 표기하기 위해서 숫자 단위당 쉼표를 표기하는 방법
Vuejs Filter Currency with decimal places

regex를 이용하는 방법도 있겠지만, 기본 내장함수를 이용하는게 제일 간단한 방법이다. 코드량도 늘어나지 않고.

필터에 아래와 같은 코드를 추가 합니다.

filters: {
  currency: value => {
    if (!value) return  ''
    return value.toFixed(0).replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,")
  }
}

.toFixed(num) : 소수점 아래 표기 자릿수(num)


반응형

'개발 > Vue.js' 카테고리의 다른 글

Vue.js | PWA | uri scheme 가 없을 경우  (0) 2018.03.12
Vue.js | PWA | uri scheme 가 없을 경우

uri scheme 를 통해서 다른 앱을 열려고 하지만, 앱이 없을 경우의 if 문을 작성하는 방법

상황

daumapp://을 통해서 지도앱을 열어서 위치를 검색하려고 하는데 앱이 없어서 다운받는 페이지로 이동

안드로이드

안드로이드 플레이스토어 접속 URL Scheme

market://details?id=[app id]
market://details?id=net.daum.android.map

브라우저를 통해서 설치시키고자하는 앱의 주소를 알 수 있다.
Play Store에서 다음맵을 검색하고, 앱을 눌러보면 상단에 https://play.google.com/store/apps/details?id=net.daum.android.map 와 같은 주소가 있다. 뒤에 id부분을 [app id] 부분에 추가하면 된다.

아이폰

애플 스토어의 URL Scheme

itms-apps://itunes.apple.com/app/[appName]/[appID]

개발자용 앱 URL Scheme

itms-apps://itunes.apple.com/developer/[developerName]/[developerID]

앱스토어는 브라우저에서 작동되는 사이트가 없으므로 구글링을 통해서 앱정보 페이지로 접속해야 합니다.

https://itunes.apple.com/kr/app/카카오맵-대한민국-no-1-지도앱/id304608425?mt=8

이런식의 주소를 찾을 수 있는데요. id304608425가 앱의 아이디입니다. 그럼 결과물은 아래과 앝은 형태가 됩니다.

items-apps://itunes.apple.com/app/id304608425

Javascript 코드

브라우저에서 기기 종류를 파악하는 코드

혹시 모를 안드로이드와, 아이폰 종류를 구분하기 위해서 아래의 코드를 작성했습니다.

getOS () {  
  let userAgent = window.navigator.userAgent  
  let platform = window.navigator.platform  
  let macosPlatforms = \['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'\]  
  let windowsPlatforms = \['Win32', 'Win64', 'Windows', 'WinCE'\]  
  let iosPlatforms = \['iPhone', 'iPad', 'iPod'\]  
  let os = null  
 if (macosPlatforms.indexOf(platform) !== -1) {  
    os = 'Mac OS'  
  } else if (iosPlatforms.indexOf(platform) !== -1) {  
    os = 'iOS'  
  } else if (windowsPlatforms.indexOf(platform) !== -1) {  
    os = 'Windows'  
  } else if (/Android/.test(userAgent)) {  
    os = 'Android'  
  } else if (!os && /Linux/.test(platform)) {  
    os = 'Linux'  
  }  
  return os  
}

URI 로 이동하는 function

goToUri (uri) {  
  window.location = uri // 앱이 있으면, 앱으로 이동. 없으면 다음줄 실행
  setTimeout( fucntion() => {  
    if (confirm('다음맵이 설치되어 있지 않습니다. 설치하시겠습니까')) {  
      if (this.os === 'Android') {  
        window.location = 'market://details?id=net.daum.android.map'  
  }  
      if (this.os === 'iOS') {  
        window.location = 'itms-apps:/itunes.apple.com/app/id304608425'  
  }  
    }  
  }, 100)  
}
반응형

'개발 > Vue.js' 카테고리의 다른 글

vuejs | filter | 숫자단위당 쉼표 표기하기  (0) 2018.05.28

+ Recent posts