v-if 와 모달창 만들기 (Vue에서 동적인 UI 만드는 법)
이미지는 src 밑에 assets에 넣는다 에 넣는법 src에 있는 이미지 사져올때 경로는 ./부터 쓴다 모달창= 탭,햄버거메뉴,서브메뉴,툴팁,이미지슬라이드.... 동적인UI만드는법착: 1 UI의 현재 상태를 데이터로 저장해둠 e export default { name: 'App', data(){ //여기가 데이터 보관함 return { 모달창열림 : false, 이미지 : ["http://localhost:8081/img/room0.e2d4696b.jpg",'http://localhost:8081/img/room1.0d438c5a.jpg','http://localhost:8081/img/room2.d330e978.jpg'], 신고수 : [0,0,0], 메뉴들 : ['Home','Shop','About'..
2023. 8. 15.
Vue 이벤트 핸들러로 click 감지하기 (허위매물 신고버튼 만들기)
허위매물신고 {{신고수}} 버튼 눌렀을 때 자바스크립트 실행하려면 전통방식은 onclick="" Vue방식은 v-on:click="" v-on생략은(v-on: 의 약자 = @) @click="" Vue에서 함수 만들고 싶으면 MEthods : {함수(){}}안에 만들면 된다 export default { name: 'App', data(){ //여기가 데이터 보관함 return { 신고수 : 0, 메뉴들 : ['Home','Shop','About'], products : ['역삼동원룸','천호동원룸','마포구원룸'], products2 : [50,'가격은아무거나',100], } }, methods : { increase(){ //신고수 += 1; 함수안에서 데이터를 사용할떈 반드시 this.데이터명 을 ..
2023. 8. 14.
리액트보다 100배 쉬운 Vue 반복문 v-for
{{ 작명 }} {{ 작명 }} {{ i }} export default { name: 'App', data(){ //여기가 데이터 보관함 return { 메뉴들 : ['Home','Shop','About'], products : ['역삼동원룸','천호동원룸','마포구원룸'], products2 : [50,'가격은아무거나'], } }, components: { } } {{ 작명 }} :key=""의 용도 반복문쓸때 꼭 써야함 반복문 돌린 요소를 컴퓨터가 구분하기 위해서 쓴다 Vue반복문 특징 {{ a }} 변수 작명 2개까지 가능 왼쪽변수는 array내의 데이터 오른쪽 변수는 1씩 증가하는 정수 오늘의 숙제 숙제 {{ 작명 }} {{ 작명 }} {{ i }} {{i}} {{products2[v]}} 만원..
2023. 8. 14.
