Vue js 2 v-if , v-for

 

v-if , v-for

 

<template>
  <div id="app">
    <div v-if="number === 1"> number 1 </div>
    <div v-else-if="number === 2"> number 2 </div>
    <div v-else> number 3 </div>
    <br/>
    <br/>
    <div v-for="one in list" :key="one.id"> {{ one.id }} {{ one.name }} {{ one.age }}</div>

    <div v-for="(one, index) in list" :key="index"> {{ index }} {{ one.id }} {{ one.name }} {{ one.age }}</div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      number : 1,
      list : [
          { id : '1', name : '일길동', age : '30' },
          { id : '2', name : '이길동', age : '31' },
          { id : '3', name : '삼길동', age : '32' }
        ]
    }
  },
}
</script>

 

v-if는 조건에 맞으면 화면에 출력하고 아니면 감춰 버리는 기능입니다.

위의 코드에서 data()에 number : 1 이리는 변수를 설정하고 v-if의 조건으로 number === 1 일경우  number 1을 출력하고

 

number === 2 일경우  number 2를 출력, 그 외의 경우는 number 3을 출력합니다. 

 

v-for는 여러개의 리스트를 for 루프를 돌려서 출력합니다.

위의 코드에서 data()에 list 라는 배열을 html에 출력하려고 할 때, v-for를 사용합니다.

 

v-for="자신이 원하는 객체 단건 명 in list" :key="자신이 원하는 객체 단건 명.중복되지않는 고유 키"

 

로 사용이 가능합니다. 저는 data() 안에 있는 list 를 one 이라고 제가 지은 객체 이름에 담았고 key 로는 겹치지 않는 id 값으로

 

설정 해주었습니다.  ( v-for는 꼭 key를 명시해주어야 동작합니다. )

 

v-for는 아래와 같이 자신이 원하는 객체 단건 명 다음 두번째 인자로 index를 사용 할 수 있습니다.

 

v-for="(자신이 원하는 객체 단건 명, index) in list" :key="자신이 원하는 객체 단건 명.중복되지않는 고유 키 (index로 대체 가능)"

 

만약 나의 데이터에 고유한 키가 없다면 index를 사용하면 되겠습니다.