Vue Rendering의 기초

조건부 렌더링 (v-if)

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>

위 코드는 type이라는 값에 따라 if문을 통해 다른 값 출력 하도록 한다.

(하나의 div만 출력됨)

 

리스트 렌더링 (v-for)

<li v-for="value in items">
{{ value }}
</li>

data: {items: ['a', 'b', 'c']}

items에 있는 값들을 v-for문을 이용해 리스트 형태로 출력하는 코드 이다.

 

v-bind : Html 속성 바인딩에 사용된다

<div v-bind:class="{ active: isActive }">A</div>

.active { background-color:red }

위코드는 isActive 값에 따라 active라는 이름의 css가 적용된다.

( isActive 가 true이면 배경색이 red 아니면 배경색 없음 )

 

v-on : 이벤트 바인딩에 사용된다.

<button v-on:click="counter += 1"
v-on:dbclick="counter += 2" >Add</button>
<p> {{ counter }} </p>

위 코드는 button 클릭시 counter 값이 1증가하고 더블클릭시에는 값이 2 증가한다.