Vue.js 상세페이지(변수로 구분), 컴포넌트, v-if 추가학습
- 여러 상세페이지 변수로 조작하기 아래 그림과같이 상세페이지가 여러개 있을 수 도 있다. 라우팅과 비슷하다고 볼 수도 있는데, 주소/0, 주소/1 주소/2 와같이 되어있을 때 뒤에 변수 0,1,2만 바꿔주면 하나의 템플릿으로 여러 페이지의 데이터 내용을 구현할 수 있다. {{ oneroom[roomNumber].title }} {{ oneroom[roomNumber].content}} 닫기 {{ a }} {{ i }} {{ a.title }} {{ a.price }}원 ....... data(){ return{ modal : false, // 닫힌 상태와, 열린상태 2가지 표현 0과1로 혹은 true,false oneroom:data, roomNumber:0, //import 해온것 } 이와같이 dat..
2023. 3. 30.
Vue.js 이벤트 핸들러(v-on:click), 조건문(v-if)
- 이벤트 핸들러 HTML 클릭시 코드 실행하는 법 버튼클릭시 이벤트를 발생시키려면 v-on:click을 사용해줘야한다. @click으로 축약할 수 도 있다. 직접 변수를 변화시켜줘도 되지만 methods에 함수를 만들어줘 사용하는게 일반적이고 함수안에서 변수를 조작할 시에 this키워드를 사용해 줘야한다. {{ a }} {{prices[i] }} 허위매물신고 신고수 : {{ alert[i] }} .......... data(){ return{ alert:[0,0,0], price1 : 60, price2 : 70, price3:80, prices:[60,70,80], 스타일 : 'color:blue', products: ["은평구원룸",'천호동원룸','마포구원룸'], 메뉴들 : ["Home","Shop..
2023. 3. 29.
