v-if, v-show
vue.js는 v-if와 v-show를 통해서 해당 엘리먼트를 조건에 맞춰서 출력해줄수 있다.
현재는 간단한 예제이지만 지속적으로 사용해가면서 익혀 나가야겠다.
<body>
<div id="app">
<h1 v-if="visible">visible1</h1>
<h1 v-show="visible">visible2</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
visible: true,
},
});
</script>
</body>
일단 기본적으로 vue.js는 new Vue라는 객체를 만듬으로써 시작된다.
el를통해 vue.js를 적용시킬 영역을 결정하고 컨트롤 한다. 아무튼. 현재 위처럼 코드가 작성되어있으면
예상 가능하게 해당 h1태그가 전부 나타난다.
당연하듯이 아래쪽의 data의 visible를 false로 바꿔주게 되면 위의 h1태그는 나타나지 않는다.
하지만 둘의 차이점이 있는데 위의 코드를 개발자도구를 이용해서 보게되면 나타난다.
v-show를 이용한 h1태그의 경우는 style에 display:none이 들어갔지만 v-if를 통해서 컨트롤한 h1태그는 아예 주석처리가 되어있다.
상황의 따라 차이는 있지만 속도나 기타 측면에서 봤을때는 v-if를 통해 엘리먼트의 유무를 컨트롤하는것이 좋을거같다.