728x90 반응형 IT511 [Vue.js] - Vue 반복문 v-for 사용해서 리스트 랜더링 하는 방법 #Vue v-for문으로 리스트 랜더링 하는 방법 -Vue에서 `v-for` 디렉티브를 사용하여 리스트를 렌더링 할 수 있습니다. `v-for`를 사용하면 Vue 데이터의 배열 또는 객체를 반복하여 요소를 생성할 수 있습니다. #vue v-for 디렉티브 문법 -v-for="(item, index) in items" items: 데이터 배열 item: 배열에 담긴 각각의 데이터 index: 배열 반복 횟수 0부터 시작 #`v-for` 디렉티브에서 `:key` 속성 뜻 `v-for` 디렉티브에서 `:key` 속성은 Vue에서 리스트 항목을 식별하는 데 사용되는 특수한 속성입니다. 각 항목에 고유한 키 값을 제공함으로써 Vue는 리스트의 변경을 효율적으로 감지하고 업데이트할 수 있습니다. `:key` 속성을.. 2023. 8. 27. [Vue.js] - Vue 클래스(class) 데이터 바인딩 하는 방법 #Vue 클래스(class) 데이터 바인딩 하는 방법 -Vue에서 `v-bind:class` 디렉티브를 사용하여 요소의 클래스를 동적으로 바인딩할 수 있습니다. 이 방법을 사용하면 Vue 데이터를 기반으로 요소의 클래스를 추가하거나 제거할 수 있습니다. -Vue.js 코드 Class Binding -Vue 클래스(class) 데이터 바인딩 테스트 true, false로 클래스 바인딩 처리를 할 수 있습니다. hasError이 true로 바뀌게 되면 'Class Binding' 문구가 빨간색으로 변합니다. #배열을 사용해서 클래스 바인딩 하는 방법 -Vue.js 코드 Class Binding -배열을 사용해서 클래스 바인딩 테스트 배열을 사용하는 경우 특정 조건에 따른 클래스 바인딩 처리를 true/fal.. 2023. 8. 27. [Vue.js] - Vue 속성(Attribute) 데이터 바인딩 하는 방법 #Img 객체의 src 데이터 바인딩 하는 방법 -`v-bind:src` 디렉티브를 사용하여 Vue에서 `src` 속성을 동적으로 바인딩할 수 있습니다. 이 방법을 사용하면 Vue 데이터를 사용하여 `src` 속성을 동적으로 변경할 수 있습니다. -Vue.js 코드 -Vue src 데이터 바인딩 테스트 #Button 객체의 disabled 속성 데이터 바인딩 하는 방법 -Vue에서 `v-bind:disabled` 디렉티브를 사용하여 버튼의 `disabled` 속성을 동적으로 바인딩할 수 있습니다. 이 방법을 사용하면 Vue 데이터를 기반으로 버튼의 활성화 또는 비활성화 상태를 동적으로 제어할 수 있습니다. -Vue.js 코드 입력창에 데이터가 입력되는 순간 버튼이 활성화가 됩니다. 입력창이 비어 있는 경.. 2023. 8. 26. [Vue.js] - Vue 라디오 버튼(radio) 데이터 바인딩 하는 방법 #Vue 라디오 버튼(radio) 데이터 바인딩 하는 방법 -Vue에서 라디오 버튼을 `v-model` 디렉티브로 바인딩하는 방법은 체크박스와 유사합니다. `v-model` 디렉티브를 사용하여 라디오 버튼의 선택된 값을 Vue 데이터 모델과 양방향으로 바인딩할 수 있습니다. -Vue.js 코드 사과 바나나 수박 선택한 과일: {{ picked }} -Vue 라디오 버튼(radio) 데이터 바인딩 테스트 2023. 8. 26. [Vue.js] - Vue 체크박스(checkbox) 데이터 바인딩 하는 방법 #Vue 체크박스(checkbox) 데이터 바인딩 하는 방법 -Vue에서 체크박스를 `v-model` 디렉티브로 바인딩하는 방법은 매우 간단합니다. `v-model` 디렉티브를 사용하여 체크박스의 상태를 Vue 데이터 모델과 양방향으로 바인딩할 수 있습니다. -Vue.js 코드 {{ checked }} -Vue 체크박스(checkbox) 데이터 바인딩 테스트 true false #여러 개의 체크박스를 데이터 바인딩 하는 방법입니다. -배열을 이용해서 데이터를 한 번에 바인딩 처리 합니다. -Vue.js 코드 사과 바나나 수박 체크한 과일: {{ checked }} -Vue 여러 개의 체크박스(checkbox) 데이터 바인딩 테스트 2023. 8. 26. [Vue.js] - Vue Select Box 데이터 바인딩 하는 방법 #Vue Select 데이터 바인딩 하는 방법 -Vue에서 `` 요소를 `v-model` 디렉티브로 바인딩하는 방법은 `` 요소나 `` 요소와 매우 유사합니다. `v-model` 디렉티브를 사용하여 `` 요소의 선택된 옵션 값을 Vue 데이터 모델과 양방향으로 바인딩할 수 있습니다. -Vue.js 코드 바나나 사과 수박 -Vue Select 데이터 바인딩 테스트 data()에서 초기값을 apple로 줘서 사과가 셀렉트 박스의 초기값으로 설정된 것을 확인하실 수 있습니다. 2023. 8. 26. 이전 1 ··· 7 8 9 10 11 12 13 ··· 86 다음 728x90 반응형
