[Vue.js] 문자열 데이터 바인딩 줄바꿈하기 (바인딩된 문자열에 html 태그 적용하기)
위와 같은 화면을 출력하려고 한다. 그런데 위의 텍스트가 에 있는 것이 아닌 ...(생략) { subTitle: "환불/취소 요청 시 먼저, 다음의 내용으로 접수하여 주세요. \n세부사항에 대한 확인이 필요합니다." } 이렇게 prop으로 상단 컴포넌트에서 넘어오는 데이터에 잡혀 있는 텍스트였다. 원래 코드는 {{ propsData.subTitle }} 이렇게 나타나던 것을 아래와 같이 {{ propsData.subTitle.replace("\n", " ") }} replace 함수를 사용해서 JSON 데이터 개행 문자인 '\n'을 html 개행 태그인 ' '로 바꿔주었더니 응? 태그가 그대로 잡히는 문제가 발생. 콧수혐 괄호 {{ }}는 바인딩되는 문자열을 문자열로만 인식하기 때문에 위와 같은 상황에선..
개발 공부 일지/Vue.js | 2020. 9. 20. 16:53
[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
[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