[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] 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