Vue.js 이벤트 핸들러(v-on:click), 조건문(v-if)

- 이벤트 핸들러

HTML 클릭시 코드 실행하는 법

버튼클릭시 이벤트를 발생시키려면 v-on:click을 사용해줘야한다. @click으로 축약할 수 도 있다.

 

직접 변수를 변화시켜줘도 되지만 methods에 함수를 만들어줘 사용하는게 일반적이고 함수안에서 변수를 조작할 시에

 

this키워드를 사용해 줘야한다.

    <div v-for="(a,i) in products" :key="i">
      <h4>{{ a }}</h4>
      <p>{{prices[i] }}</p>
      <button v-on:click="increase(i)">허위매물신고</button> <span>신고수 : {{ alert[i] }}</span>
      <!-- 함수 이름만 써줘야한다. 인자 들어갈 때 빼고-->
      <!-- <button v-on:click="alert++">허위매물신고</button> <span>신고수 : {{ alert }}</span> -->
      <!-- 이벤트 종류 되게 많다. -->
      <!-- <button @mouseover=""></button> -->
      <!-- @click -->
      <!-- v-on:click=""" -->
    </div>
    
    ..........
    
  data(){
    return{
      alert:[0,0,0],
      price1 : 60,
      price2 : 70,
      price3:80,
      prices:[60,70,80],
      스타일 : 'color:blue',
      products: ["은평구원룸",'천호동원룸','마포구원룸'],
      메뉴들 : ["Home","Shop","About"],


    }
  },
  methods:{
    // 함수 만드는 공간
    increase(i){
      this.alert[i]+=1;
    }

  },
  
  .......

 

- 조건문

v-if="조건식" 참일 때만 보여준다.

<div class="black-bg" v-if="modal == true">

 

- Modal창 만들기

동적인 UI만들기

1.UI의 현재 상태를 데이터로 저장해두기

<template>

  <div class="black-bg" v-if="modal == true">
    <div class="white-bg">
      <h4>상세페이지</h4>
      <p>상세페이지 내용</p>
      <button @click="modal=false">닫기</button>
    </div>
  </div>


.........

/* 여기부터 modal */
div{
  box-sizing: border-box;
}
.black-bg{
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  position: fixed; padding: 20px;
}
.white-bg{
  widows: 100%; background: white;
  border-radius: 8px;
  padding:20px;
}
.room-img{
  width:100%;
  margin-top:40px;
}
/* modal끝 */

2.데이터에 따라 UI가 어떻게보일지 작성하기 (true, false에따라)

  <div class="black-bg" v-if="modal == true">
    <div class="white-bg">
      <h4>상세페이지</h4>
      <p>상세페이지 내용</p>
      <button @click="modal=false">닫기</button>
    </div>
  </div>
  
  .......
export default {
  name: 'App',
  data(){
    return{
      modal : false, // 닫힌 상태와, 열린상태 2가지 표현 0과1로 혹은 true,false
      
      .........

 

 

- image태그 사용하기

<div v-for="(a,i) in products" :key="i">
<img :src="oneroom[i].image">

<img :src="require(`@/assets/${img}`)" /> 
// 변수 사용하는방법

<img :src="require(`@/assets/${images[i]}`)" class="room-img">
// 변수 + 인덱스 속성이용해서 사용하는방법

<img src="./assets/파일이름.png">
<img src="./경로">
이와같이 사용해도 된다.

............

  data(){
    return{
      images:["room0.jpg","room1.jpg","room2.jpg"],

  


    }

HTML태그안의 속성 데이터바인딩 : 사용

HTML태그안의 내용 데이터바인딩 {{ }} 사용

 

- import, export

1) export

데이터가 많거나 길면 export를 이용할 수 있다. 

post.js
var apple = 10;
var apple2 = 100;

// export default apple;
export {apple,apple2};
// 2개이상 내보낼때 변수말고 함수도 내보낼 수 있다.
// 참고로 중괄호 쓰면 받을때도 import {apple} from './경로'
//이렇게 써야한다.

data.js
// var a = 

var a = [] 형태로 사용해도 되지만 아래와같이 써도 된다.

export default[{
    id : 0,
    title: "Sinrim station 30 meters away",
    image: "https://codingapple1.github.io/vue/room0.jpg",
    content: "18년 신축공사한 남향 원룸 ☀️, 공기청정기 제공",
    price: 340000
    },
    {
    id : 1,
    title: "Changdong Aurora Bedroom(Queen-size)",
    image: "https://codingapple1.github.io/vue/room1.jpg",
    content: "침실만 따로 있는 공용 셰어하우스입니다. 최대 2인 가능",
    price: 450000
    },
    {
    id : 2,
    title: "Geumsan Apartment Flat",
    image: "https://codingapple1.github.io/vue/room2.jpg",
    content: "금산오거리 역세권 아파트입니다. 애완동물 불가능 ?",
    price: 780000
    },
    {
    id : 3,
    title: "Double styled beds Studio Apt",
    image: "https://codingapple1.github.io/vue/room3.jpg",
    content: "무암동인근 2인용 원룸입니다. 전세 전환가능",
    price: 550000
    },
    {
    id : 4,
    title: "MyeongIl Apartment flat",
    image: "https://codingapple1.github.io/vue/room4.jpg",
    content: "탄천동 아파트 월세, 남향, 역 5분거리, 허위매물아님",
    price: 680000
    },
    {
    id : 5,
    title: "Banziha One Room",
    image: "https://codingapple1.github.io/vue/room5.jpg",
    content: "반지하 원룸입니다. 비올 때 물가끔 새는거 빼면 좋아요",
    price: 370000
  }];

//   export default a;

2)import  - js로 만들어진 파일의 데이터를 가져와 사용할 수 있다.

........
<script>

import data from './assets/data'
// import {} from ~
// {}로 내보낸 파일은 불러올 때도 {}를 사용해야 한다.

export default {
  name: 'App',
  data(){
    return{
    
    ......

- 전체 코드 및 결과

App.vue

0.00MB

- 참고하면 좋은 링크

https://im-designloper.tistory.com/81