Vue.js

HTML 속성 데이터바인딩

style="", id="", class=""에도 데이터바인딩이 가능하다.

  <div>
    <h4 :style="스타일">XX 원룸</h4>
  </div>

<script>
export default {
  name : 'App',
  data(){
    return {
      스타일 : 'color:red'
    }
  }
}
</script>

v-for

v-for을 사용하면 HTML을 반복할 수 있다.

사용법

v-for="작명 in 반복할 횟수"

예제

<div class="menu">
	<a v-for="작명 in 3" :key="작명">Home</a>
</div>

Home이라는 a태그가 3개가 생성된다.

예제2

data(){
  return {
    메뉴들 : ['Home', 'Shop', 'About']
  }
}

<div class="menu">
  <a v-for="작명 in 메뉴들" :key="작명">{{ 작명 }}</a>
</div>

메뉴들안의 자료 갯수만큼 반복된다.
작명한 변수는 반복될 때마다 메뉴들 안에 있던 자료들이 된다.

예제3

<div class="menu">
  <a v-for="(작명,i) in 메뉴들" :key="i"> {{ 작명 }}</a>
</div>

v-for 안에 변수는 2개까지 작명이 가능하다.
i는 1씩 증가하는 정수가 된다. 즉, 반복 횟수를 알려주는 숫자라고 보면 된다.

@click

버튼을 누르면 기능을 실행하고 싶은 경우에 사용한다.

예제

data(){
  return {
    신고수 : 0,
  },
}

methods : { 
  increase(){ 
    this.신고수 += 1 
  } 
}

methods 내에 있는 함수에서 data를 가져가다 쓰고 싶으면 꼭 this.데이터이름이라고 사용해야 한다.

data(){} 이 부분은 리액트에서 state라고 부른다.

<div>
  <button @click="increase()">신고</button>
  <span>신고수 : {신고수}</span>
</div>

함수() 위에 있는 코드처럼 작성해도 되지만 @click="increase" 이렇게 작성해도 된다.

v-if

데이터 상태에 따라 HTML UI을 보여줄지 말지를 정한다.
HTML 태그 안에 v-if="조건식"을 사용하면 조건식이 참일 때만 HTML을 보여준다.

<div class="black-bg" v-if="모달창열렸니 == true">
  <div class="white-bg">
    <h4>상세페이지</h4>
    <p>상세페이지내용임</p>
  </div>
</div>

'모달창열렸니'라는 데이터가 true일 때만 <div>를 보여준다.

v-else

<div v-if="1 == 2">
  안녕하세요
</div>
<div v-else>
  안녕하세요2
</div>

v-if에 적은 조건식이 참이 아닐 경우에 v-else를 보여준다.

v-else-if

<div v-if="1 == 2">
  안녕하세요
</div>
<div v-else-if="1 == 3">
  안녕하세요2
</div>

조건식 연달아 사용할 때는 v-else-if를 사용하면 된다.