728x90 개념정리14 [Vue.js] Vue v-for와 key 개념 및 예제 Vue.js v-for와 key 개념 및 예제 코드 // == 이름: {{ person.name }} 나이: {{ person.age }} 실행 결과 코드 - index 사용하기 {{ index }} 이름: {{ person.name }} 나이: {{ person.age }} 실행 결과 코드 - key 사용하기 {{ index }} 이름: {{ person.name }} 나이: {{ person.age }} key를 사용하는 이유 기존 엘리먼트를 재사용 및 정렬하기 위해서 v-for의 각 항목들에 고유한 속성을 제공하여 항목들을 고유한 ID로 식별할 수 있다. 반복되는 DOM 내용이 단순한 경우나 의도적인 성능 향상을 위해 기본 동작에 의존하지 않는 경우를 제외하고는 가능하면 언제나 v-for에 ke.. 2022. 4. 26. [Vue.js] Vue v-if와 v-show 개념 및 예제 Vue.js Vue v-if와 v-show 개념 및 예제 토글이 자주 일어난다면 v-show를 사용하고, 그렇지 않다면 v-if를 사용하는 것을 권장한다. 코드 - if / else Hello Vue! Bye! Click! 실행 결과 코드 - if / else / else if H E L L O Five!! Bye! Plus! {{ number }} 실행 결과 코드 - template으로 여러 개 한번에 제어하기 H E L L O Bye! Click! 실행 결과 코드 - show Hello Vue!! Click! 실행 결과 2022. 4. 26. [Vue.js] Vue 클래스와 스타일 바인딩 개념 및 예제 Vue.js Vue 클래스와 스타일 바인딩 개념 및 예제 코드 - Vue 클래스 바인딩 Hello Click! 실행 결과 코드 - Vue 스타일 바인딩 스타일 바인딩 연습 실행 결과 2022. 4. 26. [Vue.js] Vue watch 속성 개념 및 예제 Vue.js Watch 속성 개념 및 예제 설명 Watch 속성 감시할 데이터를 지정하고 해당 데이터가 변경되면 정의된 함수를 실행한다. computed는 이미 정의된 계산식의 결과값을 반환할 때 사용되고 watch는 트리거와 같이 특정 조건에서 함수를 실행시키기 위해 사용된다. watch를 남용하는 것 보다 되도록 computed를 사용하기를 권장한다. 코드 {{ message }} Change! Changed? {{ updated }} 실행 결과 2022. 4. 26. 이전 1 2 3 4 다음 728x90
