[Vue.js] 숫자 자릿수 잘라서 보여주기(?)
위와 같은 형태를 화면에 구현해야 했다. 이를 위해 데이터로부터 받아 오는 숫자를 하나하나 쪼개서, div에 각각의 숫자를 집어넣는 방법을 생각했다. ₩ {{ priceTotal(priceLength, i) }} export default { props: ["paymentData"], data() { this.paymentData.slicePrice = String(this.paymentData.paymentPrice).split("") return { priceLength: 10, } }, methods: { priceTotal(length, i) { const calcuIndex = this.paymentData.slicePrice.length - length + i return calcuIndex ..
개발 공부 일지/Vue.js | 2020. 9. 15. 17:45
[javascript] 숫자 천 단위마다 콤마 찍는 함수
두 가지 방법이 가능하다. 1. toLocaleString() toLocaleString() 메서드는 배열의 요소를 나타내는 문자열을 반환하는 함수로, locale 고유 문자열에 의해 분리되는데 숫자의 경우는 쉼표(.)로 분리된다. const array1 = [ 123450 ] array1.toLocaleString() 2. 정규표현식 /* 숫자 1000단위마다 , 표시하게 하는 함수 */ function commaAdd(num) { const regexp = /\B(?=(\d{3})+(?!\d))/g return num.toString().replace(regexp, ",") } (commaAdd는 함수 이름으로 각자 임의로 만들어서 넣어주면 된다.)
개발 공부 일지/Javascript | 2020. 9. 15. 06:06
[Vue.js] 순수 Vue로만 페이지네이션 구현하기
스터디에서 Vue.js로 웹페이지를 만드는 프로젝트를 하고 있는데, 사정상 아직 Vuex를 쓰지 못하는 상태에서, 백엔드 개발도 전혀 이뤄지지 않은 상황에서 화면상으로만 페이지네이션을 구현해야 했다. 페이지에 표시되는 데이터를 넘겨주는 부모 컴포넌트 index.vue가 있고, 페이지를 표시하는 하위 컴포넌트인 pagination.vue가 있다. index.vue 거래내역이 없습니다. 컴포넌트는 위 완성샷 사진에서도 살짝 보이는, 거래내역을 보여주는 컴포넌트다. 보다시피 부모 컴포넌트인 index.vue에서 "orderListData"의 이름으로 데이터를 전달하고, v-for로 화면에 뿌려준다. 컴포넌트가 페이지를 표시하기 위한 컴포넌트. 페이지를 클릭하면 이전 페이지, 다음 페이지로 넘어갈 수 있게도 만..
개발 공부 일지/Vue.js | 2020. 9. 14. 16:19
[Vue.js] img 태그 이미지 주소 데이터 바인딩
export orderInfo = [ { paymentIdx: "O16086544", goodsName: "1번 상품명", goodsIdx: 1234567, goodsimg: "https://cdn.pixabay.com/photo/2015/02/02/11/08/office-620817_960_720.jpg", ...(생략) } ] 이런 형태의 배열 데이터가 있다. 여기의 goodsimg에 문자열 형태로 있는 이미지 주소를 태그의 src 부분에 넣어주려고 한다. ...(생략) {{ orderInfo.paymentIdx }} ...(생략) 이 때 img 태그의 src 부분이 데이터 바인딩이 되는 부분이므로, 위의
개발 공부 일지/Vue.js | 2020. 9. 14. 14:56