[Vue.js] 뷰 조건부 랜더링 v-if v-else-if v-else

[Vue.js] 뷰 조건부 랜더링 v-if v-else-if v-else 

 

⭐️  VUE 조건부 랜더링

뷰에서 조건부 랜더링시 v-if를 쓰면 편하다

즉, 자바스크립트 없이 그냥 해당 문법만으로

해당 태그를 포함하여 랜더하거나 제외시킬수 있다

 

⭐️  샘플 예제 (로직)

간단한 예제를 위해 

dropdown내  짱구 선택시,

짱구 이미지가 나오고

흰둥이 선택시 흰둥이 이미지 등

선택한 이미지가 출력되는 예제이다

 

⭐️  App Component

<template>
  <div class="content">
    <select v-model="selectImg">
      <option>짱구</option>
      <option>흰둥이</option>
      <option>철수</option>
      <option>영희</option>
      <option>맹구</option>
    </select>
    <div>
      <img class="content--img" v-if="selectImg === '짱구'" src="https://upload.wikimedia.org/wikipedia/ko/thumb/4/4a/%EC%8B%A0%EC%A7%B1%EA%B5%AC.png/230px-%EC%8B%A0%EC%A7%B1%EA%B5%AC.png"/>
      <img class="content--img" v-else-if="selectImg === '흰둥이'" src="https://t1.daumcdn.net/cfile/blog/253E3E3C5196CFC503" />
      <img class="content--img" v-else-if="selectImg === '철수'" src="https://cdnweb01.wikitree.co.kr/webdata/editor/202103/23/img_20210323144951_67bba4a3.webp"/>
      <img class="content--img" v-else-if="selectImg === '영희'" src="https://ww.namu.la/s/cb44538b575f372318ce9c28cd806dde1e6ac146514283b57b696ad7226ca18971fdae5716367e639a3345594b8cdfbf119bcc971b7a686b17c0873402ad659dc51340cbd78baa6621a0db347efeed4475b06b8df1a06761e5c8e4995d59b04b"/>
      <img class="content--img" v-else src="https://mblogthumb-phinf.pstatic.net/MjAxOTA3MzBfNzMg/MDAxNTY0NDYxNDMzNDE5.-Z8Y_RfxU0tN2nrsfcoC6qUDMJ0S69aK1wTeWUYWjXwg.aWtBT1o3_ZO-uX-wLjVdVAaNIj1S9UoGfHc9A5WpXpgg.JPEG.369ginseng/Screenshot_20190730-131319_NAVER.jpg?type=w800"/>
    </div>
  </div>
</template>

<script>
export default {
  name : 'App',
  data(){
    return {
      selectImg : '짱구',
    }
  }
}
</script>

<style>
  .content--img {
    width : 150px;

  }
</style>

 

🌈  출력 결과