4강: conditional rendering

yuriring·2023년 4월 7일

VueMastery

목록 보기

3/6

강의 목표 : v-if 를 이용하여 조건에 따라 다른 HTML 요소를 표시하기.

1. main.js에 양말의 재고 여부를 위한 data object, inStock boolean,을 만든다. boolean은 true

//main.js

const app = Vue.createApp({
  data(){
    return{
      product: "Socks",
      image: "./assets/images/socks_blue.jpg",
      inStock: true
    }
  }
})

2. p tag 두 개를 만들고 하나는 In Stock, 다른 하나는 Out of Stock 만들기

//index.html

<p> In Stock <p>
<p> Out of Stock </p>

3. p tag에 v-if, v-else directive 연결

v-else 에 inStock 문구 삽입은 생략해도 된다. 또한, 간단한 조건문이기 때문에 v-else directive가 없어도 된다.

//index.html

<p v-if="inStock"> In Stock <p>
<p v-else> Out of Stock </p>

그 때 갑자기 등장하는 v-show..

v-show

v-if처럼 DOM에서 엘레먼트를 추가/삭제 하는 대신
v-show는 단순히 요소의 visibility를 toggle한다.
예를 들어 모달과 같이 자주 꺼지고 화면에 표시되는 항목이 있는 경우 더 성능이 좋은 옵션임.

v-if 대신 v-show를 사용했을 때 예제

<p v-show="inStock"> In Stock </p>

inStock이 false일 때
element가 DOM에서 삭제된거 아님. 그냥 숨어있음

Creating chained conditional logic

인생도 쇼핑몰도 true, false 값으로 간단하면 참 좋겠지만 얽힌 실타래 같이 복잡한게 우리네 인생 조건부.... 그러므로 이 코드에 조건부 로직을 만듭니다.

1. data object에 inStock을 inventory로 대체 후 integer(정수)값을 넣는다.

//main.js

const app = Vue.createApp({
  data(){
    return{
      product: "Socks",
      image: "./assets/images/socks_blue.jpg",
      inventory: 100 //양말 재고 100 켤레
    }
  }
})

2. 재고 유무 표시을 위한 조건 만들기
: 만약 inventory가 10보다 크면 In Stock, 10 보다 작으면 Out of Stock을 브라우저에 띄운다

//index.html

<p v-if="inventory > 10"> In Stock <p>
<p v-else> Out of Stock </p>

3. v-if와 v-else 사이에 v-else-if 삽입
: 만약 inventory가 10보다 작거나 같고 0보다 크면 Almost Sold out !! 이라고 재고가 거의 없음을 알린다.

//index.html

<p v-if="inventory > 10"> In Stock <p>
<p v-else-if="inventory <= 10 && inventory > 0"> Almost Sold out!! </p>
<p v-else> Out of Stock </p>

결과

1. 재고가 11~100 켤레 사이

재고 88, 아직 여유있다.

2. 재고가 1~10 켤레 사이

7 켤레 남음.. 고민은 품절을 일으킬 뿐

3. 재고 0

하얗게 다 팔았습니다..

code challenge

Add an 'onSale' boolean to the data object.
Use that to conditionally render a p tag that says: 'On sale', whenever 'onSale' is true.

code challenge 정답

//index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue Mastery</title>
    <!-- Import Styles -->
    <link rel="stylesheet" href="./assets/styles.css" />
    <!-- Import Vue.js -->
    <script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <div class="nav-bar"></div>
      
      <div class="product-display">
        <div class="product-container">
          <div class="product-image">
            <img v-bind:src="image">
          </div>
          <div class="product-info">
            <h1>{{ product }}</h1>
            <!-- <p v-if="onSale">onSale</p> -->
            <p v-if="inventory > 10">In Stock</p>
            <p v-else-if="inventory <= 10 && inventory > 0">Almost sold out</p>
            <p v-else>Out of Stock</p>
            <p v-if="onSale"> On Sale! </p>
          </div>
          </div>
        </div>
        </div>
      </div>
      </div>
      </div>
    </div>

    <!-- Import App -->
    <script src="./main.js"></script>

    <!-- Mount App -->
    <script>
      const mountedApp = app.mount('#app')
    </script>
  </body>
</html>

//main.js

const app = Vue.createApp({
  data() {
    return {
      product: "Socks",
      image: "./assets/images/socks_blue.jpg",
      inventory: 100,
      onSale: true,
    };
  },
});