:key"index" v-for="(별칭, index) in 배열"
참고 : 위 문법에서 :key는 v-bind:key의 약어를 의미함
<template>
<div>
<select v-model="city">
<option :value="city.v" :key="i" v-for="(city,i) in options">{{city.t}}</option>
</select>
</div>
</template>
data() {
return {
options: [
{v: '02', t:'서울'},
{v: '21', t:'부산'},
{v: '064', t:'제주'},
],
city: '064' //제주에 초점
};
}
<template>
<div>
<table>
<tbody>
<tr :key="i" v-for="(product, i) in productList">
<td>{{product.product_name}}</td>
<td>{{product.price}}</td>
<td>{{product.delivery_price}}</td>
<td>{{product.category}}</td>
</tr>
</tbody>
</table>
</div>
</template>
data() {
return {
productList: [
{product_name: '기계식 키보드', price:25000, delivery_price:5000, category:'전자제품'},
{product_name: '마우스', price:5000, delivery_price:5000, category:'전자제품'}
]
};
}
<template>
<div>
<h1 v-if="type=='A'">A</h1>
<h1 v-else-if="type=='B'">B</h1>
<h1 v-else-if="type=='C'">C</h1>
<h1 v-else>D</h1>
</div>
</template>
data() {
return {
type: 'B'
};
}
출력결과 : B
v-show는 따로 조건문을 둘 수 없으며, false일경우 display:none처리를 하여 화면상에 안보이게 하는것일뿐 렌더링은 작동한다.
반면에 v-if는 조건에 맞지않아 false로 처리될 경우, 렌더링 자체가 작동하지 않는다.
때문에 화면에 가볍게 보였다 안보였다 하는정도라면 v-show를, 여러 조건이 필요한 경우라면 v-if를 사용하는 것이 적절하다.