Web(vue)

v-for와 v-if 동시사용

v-for와 v-if의 동시사용을 금지하는 이유는 우선순위에 있다. 2.x버전에서는 v-for가 더 높은 우선순위를 가진다. 3.x버전에서는 v-if가 더 높은 우선순위를 가진다. 따라서, 두 디렉티브를 같이 사용하는 것을 지양하도록 가이드라인이 정해져있다. 하지만, v-for와 v-if를 동시사용해야 한다면 우회해서 사용하는 방법은 존재한다. 첫번째, 목록의 항목을 필터링 할 경우 (v-for="user in users" v-if="user.isActive") users를 활성 사용자를 반환하는 새로운 computed 속성(예:activeUsers)으로 대체한다. {{ user.name }} 두번째, 숨김 목록의 렌더링을 피할 때 (v-for="user in users" v-if="shouldShowU..

methods 와 computed 의 차이

두개의 차이 점은 캐싱(casing)이다. vue.js 공식 홈페이지에 있는 예제를 보면 뒤집힌 메시지: "{{ reversedMessage() }}" reversedMessage()를 통해서 뒤집힌 메세지를 출력하고 있다. 이를 methods형식으로 구현할 경우, methods: { reversedMessage: function () { return this.message.split('').reverse().join('') } } 이를 computed로 구현할 경우, computed: { reversedMessage: function () { return this.message.split('').reverse().join('') } } 두 코드 모두 구조가 비슷하지만 method는 랜더링을 할때마다 항..