[VueJS] v-for와 v-if 동시에 사용하기 (ft. 같은 노드 우선순위)

vueJS에서 제공하는 v-for와 v-if 구문을 동시에 사용하면 어떻게될까?

 

우선 v-for구문과 v-if구문을 같이 사용하는건 정말 그 경우밖에 없는게 아니면 사용을 권하고싶지는 않다.

하지만 역시 꼭 사용해야한다면 알아둬야할게 있는데, 이게 버전마다 기준이 다르다는 것이다.

 

코드를 보기전에 결론부터 말하자면 둘이 같은 노드에 존재한다는 가정하에

2.x 버전에서는 v-for 구문이 더 높은 우선순위를 가지게 되는데,

요즘 나온 3.x 버전에서는 v-if 구문이 항상 더 높은 우선순위를 가지게 된다.

 

아마 아직 2.x 버전을 사용하는 곳이 많을텐데 버전에 따라 우선순위가 달라지니 알아두면 좋다.

 

일단 예제코드는 2.x버전을 기준으로 작성한 것이다.

---

▷ 예제1) 2.x 버전의 v-for v-if 우선순위

<div id="app">
    <span v-for="txt in list" v-if="txt != 'b'">{{txt}}</span>
</div>

new Vue({
  el: '#app',
  data: {
    list: [
      'a','b','c','d','e'
    ]
  },
});

 

▷ 결과

---

참고 : https://v3.ko.vuejs.org/guide/migration/v-if-v-for.html#%E1%84%89%E1%85%A5%E1%84%85%E1%85%A9%E1%86%AB

v-if와 v-for의 우선순위 | Vue.js