VUEJS) 조건문과 반복문

조건문 v-if를 활용한 예제

html

<div id="app">
  <p v-if="seen"> 보이나요 </p>
  </div>
</d>

 

js

const vm = new Vue({
  el: '#app',
  data: {
    seen: true
   }
})

 

실행화면

v-if를 이용하면 js에서 html을 껏다 켰다 제어할 수 있다.
위의 예제에서는 html내의 div태그 내의 v-if="seen" 의 seen은 js에서 정의한 seen의 값에 따라 제어 된다. 만약 js내의 seen이 true이면 텍스트가 출력되고, false이면 출력되지 않는다. 트랜지션 효과 -> 애니메이션하는 개념을 정용한다.

 

배열과 반복문 v-for을 이용한 예제

html

<div id="app">
  <ol>
    <li v-for="todo in todos">
     {{ todo.text}}
    </li>
  </ol>
</d>

 

js

const vm = new Vue({
  el: '#app',
  data: {
    todos: [
      { text: '1111'},
      { text: '2222'},
      { text: '3333'}
    ]
   }
})

 

실행화면

v-for을 이용하면 반복문을 사용 할 수있다. 먼저 js에서 todos라는 배열안에 3개의 객체를 만들고 html에서는 li태그 내에서 v-for="todo in todos"라는 반목문을 이용해서 todos를 반복해준다.
여기서 todo in todos란, js내의 todos라는 배열을 todo라는 단위(?)로 만들어서 하나씩 불러오면서 todos배열을 모두 읽은 후에 반복문이 종료된다.
어쨋든, todo.text를 통해 객체들이 하나씩 출력된다. ol태그안에서 li태그를 사용했기때문에 앞에 숫자가 붙는다.

 

v-if를 이용한 응용 예제

※ js문법
빈문자열, 0, null 은 false

html

<div id="app">
  <p v-if="message"> {{ message }} 234 </p>
  </div>
</d>

 

js

const vm = new Vue({
  el: '#app',
  data: {
    message: '1'
   }
})

 

실행결과

js내의 message내의 텍스트와 문자 1 234가 출력된다. 
만약 js내의 message가 빈문자열일 경우에는 v-if내의 message가 false이기 때문에 message가 출력되지 않는다.