728x90
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Vue.js App</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="app">
<div v-if="ok">v-if</div>
<div v-show="ok">v-show</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
var app = new Vue({
el: '#app',
data: {
ok: false
}
})
=> v-if 는 주석으로 출력
v-show 는 스타일로 displage:none; 처리
● <template> v-if
v-if는 단일 요소에 적용해야됨. 여러 요소에 같은 조건을 부여한다면 template 태그를 사용하면됨.
*v-show 는 불가
<template v-if="ok">
<header>title</header>
<div>contents</div>
</template>
● v-else-if, v-else
<div id="app">
<div v-if="type ==='A'">
A
</div>
<div v-else-if="type ==='B'">
B
</div>
<div v-else>
모든 조건을 만족하지 않음
</div>
</div>
var app = new Vue({
el: '#app',
data: {
type: 'A'
}
})
728x90
'Vue.js' 카테고리의 다른 글
| [Vue.js] key 역할 (0) | 2024.01.17 |
|---|---|
| [Vue.js] 리스트 데이터출력-반복렌더링 (0) | 2024.01.17 |
| [Vue.js] SVG 데이터 바인딩하기 (0) | 2024.01.17 |
| [Vue.js] 데이터 바인딩 - 텍스트, 속성 (0) | 2024.01.17 |
| [Vue.js] 데이터 바인딩 (0) | 2024.01.17 |
