[vue.js] Show/Hide elements

웹 페이지에서 요소를 숨기고 표시하는 것은 자주 발생하는 UI 관련 작업입니다. 일부 세부 정보 섹션, 도구 설명 등의 가시성을 전환할 수 있습니다.

# 여기부터 시작해 보자!
<template>
  <div class="flex flex-col items-center">
    <div class="one">Element One</div>
    <div class="two">Element Two</div>
    <div class="three">Element Three</div>
  </div>
</template>

1. v-if="Boolean"

화면에서 숨기고, 코드도 삭제된다.

<template>
  <div class="flex flex-col items-center">
    <div v-if="value2" class="one">Element One</div>
    <div class="two">Element Two</div>
    <div class="three">Element Three</div>
  </div>
</template>

<script>
  export default {
  	data() {
  	  return {
  		value1: true,
  		value2: false,
  	  };
  	},
  };
</script>

2. v-show="Boolean"

엘리먼트를 화면에서 숨기지만 코드는 살아있다.

<template>
  <div class="flex flex-col items-center">
    <div v-if="value2" class="one">Element One</div>
    <div v-show="value2" class="two">Element Two</div>
    <div class="three">Element Three</div>
  </div>
</template>

<script>
  export default {
  	data() {
  	  return {
  		value1: true,
  		value2: false,
  	  };
  	},
  };
</script>

3. CSS class="hidden" / "none"

css class visibility: hidden;을 사용하면 엘리먼트를 화면에서 숨기지만 브라우저상의 형태와 엘리먼트 코드를 유지한다. 아예 삭제하고 싶으면 visibility: none;으로 설정한다.

<template>
  <div class="flex flex-col items-center">
    <div class='one'>Element One</div>
    <div :class="{notVisible : !value2}" class='two'>Element Two</div>
    <div class="three">Element Three</div>
  </div>
</template>

<style>
  .notVisible {
    visibility: hidden;
  }
</style>

4. Based on screen size (tailwind)

브라우저 창의 크기에 따른 반응형 hidden을 구현 할 때. 단 형태는 없어지지만 코드는 살아있다.

<template>
  <div class="flex flex-col items-center">
    <div class="one">Element One</div>
    <div class="two md:hidden">Element Two</div>
    <div class="three">Element Three</div>
  </div>
</template>