ABOUT ME

Today
Yesterday
Total
  • [vue]v-for 조건부 랜더링(template태그)
    react+vue 2022. 11. 9. 14:20

    조건부 렌더링

    v-if와 v-for는 함께 사용할 수 없다

    <template>
      <div>
        <h2 v-if="animal!=='monkey'"v-for="(animal,index) in animals" :key="index">{{index}}:{{animal}}</h2>
      </div>
    </template>
    
    <script>
    
    export default {
      name: 'App',
      data: ()=>{
        return {
          animals:["monkey","rat","dog","lion"]
        };
      }
    }
    </script>
    

    • 태그를 중첩시키는 방법
    <template>
      <div>
        <h2 v-for="(animal,index) in animals" :key="index">
          <span v-if="animal!=='monkey'">{{index}}:{{animal}}</span>
        </h2>
      </div>
    </template>
    
    <script>
    
    export default {
      name: 'App',
      data: ()=>{
        return {
          animals:["monkey","rat","dog","lion"]
        };
      }
    }
    </script>
    

    h2와 span태그가 반복되는 만큼 생성되어 비효율적이다.

    • template 태그 사용

    <template>
      <div>
        <template v-for="(animal,index) in animals" :key="index">
          <h2 v-if="animal!=='monkey'">{{index}}:{{animal}}</h2>
        </template>
      </div>
    </template>
    
    <script>
    
    export default {
      name: 'App',
      data: ()=>{
        return {
          animals:["monkey","rat","dog","lion"]
        };
      }
    }
    </script>
    

    중첩태그 없이 필요한 개수만큼 태그가 생성된다.

    'react+vue' 카테고리의 다른 글

    [vue]메서드  (0) 2022.11.09
    [vue]v-for  (0) 2022.11.09
    [vue]v-show와 v-if의 차이  (0) 2022.11.09
    [vue] 조건부 렌더링(v-if)  (0) 2022.11.09
    [vue]템플릿문법 (v-bind, class)  (0) 2022.11.09

    댓글

Designed by Tistory.