v-show는 시각적으로만 보이지 않게, v-if는 DOM에서 완전히 제외된다.

[Vue] v-show와 v-if의 차이

 

[Vue] v-show와 v-if의 차이

 

1. v-show, v-if의 역할과 차이

2. 언제 사용하는가

 

1. v-show, v-if의 역할과 차이

 v-show와 v-if는 할당된 문자열 값이 거짓일 시 화면에 나타내지 않는다. 그러나 보이는 화면은 같지만 실제 표현되는 HTML 구조에는 차이가 있다. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue v-show와 v-if의 차이</title>
  </head>
  <body>
    <div id="app">
      <div id="show">
        show
        <!-- v-show로 설정된 요소 -->
        <div v-show="false">v-show를 사용하여 보이지 않게 처리된 요소</div>
      </div>
      <div id="if">
        if
        <!-- v-if로 설정된 요소 -->
        <div v-if="false">v-if를 사용하여 보이지 않게 처리된 요소</div>
      </div>
    </div>
    <script type="text/javascript" src="https://unpkg.com/vue"></script>
    <script type="text/javascript">
      const vm = Vue.createApp({
        name: "App",
      }).mount("#app");
    </script>
  </body>
</html>

v-show는 HTML 구조에 속해있지만, v-if는 HTML 구조에 포함되지 않는다.

2. 언제 사용하는가

  v-show
  • 렌더링 여부가 자주 변경되는 요소 (예외적으로 사용) e
  • x) 체크 박스 값에 따라 추가로 입력해야 하는 input

 v-if
  • 렌더링 여부가 자주 변경되지 않는 대부분의 요소
  • ex) 언어 설정에 따라 다르게 렌더링되는 요소

'vue > 기초 공부' 카테고리의 다른 글

[Vue] 단방향 데이터 바인딩(V-bind)과 양방향 데이터 바인딩(V-model)  (0) 2024.04.29

 V-bind는 단방향 바인딩 이기에 사용자 입력에 값이 변하지 않는다. 그러나 V-model은 사용자 입력에 맞춰 값이 변한다.

[Vue] 단방향 데이터 바인딩(V-bind)과 양방향 데이터 바인딩(V-model)

 

[Vue] 단방향 데이터 바인딩(V-bind)과 양방향 데이터 바인딩(V-model)

 

1. V-bind란?

2. V-bind 코드로 살펴보기

3. V-model이란?

4. V-model 코드로 살펴보기

 

1. V-bind란?

 데이터가 Vue 데이터 객체에서 HTML로 전달된다. HTML에서는 데이터를 전달받을 뿐 조작은 불가능하다. 만약 데이터를 변경하고 싶으면 Vue 데이터 객체에 접근해야 한다.

 사용 예시
  • 내부 함수 동작으로 HTML 요소를 조작해야 할 때
  • 데이터 객체 값에 따른 조건부 렌더링을 해야할 때

2. V-bind 코드로 살펴보기 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <input v-bind:value="name" />
      <br />
      내 이름은 <span>{{name}}</span>
    </div>
    <script type="text/javascript" src="https://unpkg.com/vue"></script>
    <script type="text/javascript">
      const vm = Vue.createApp({
        name: "App",
        data() {
          return { name: "" };
        },
      }).mount("#app");
    </script>
  </body>
</html>
input에 값을 입력해도 반영 X

3. V-model이란?

 Vue 데이터 객체에 있는 값과 HTML 요소를 연결한다. HTML 요소의 초기값은 Vue 데이터 객체의 값이지만 HTML에서 값을 변경하면 데이터 객체의 값도 변경된다.

 사용 예시
  • 사용자가 input 요소에 입력한 값을 화면에 보여줘야 할 때

4. V-model 코드로 살펴보기 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <input v-model="name" />
      <br />
      내 이름은 <span>{{name}}</span>
    </div>
    <script type="text/javascript" src="https://unpkg.com/vue"></script>
    <script type="text/javascript">
      const vm = Vue.createApp({
        name: "App",
        data() {
          return { name: "" };
        },
      }).mount("#app");
    </script>
  </body>
</html>

 

입력한 값이 반영 O

'vue > 기초 공부' 카테고리의 다른 글

[Vue] v-show와 v-if의 차이  (0) 2024.05.04

+ Recent posts

티스토리툴바