728x90 반응형 IT/Vue.js25 [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. [Vue.js] - Vue Textarea 데이터 바인딩 하는 방법 #Textarea 데이터 바인딩 하는 방법 Vue에서 `` 요소를 `v-model` 디렉티브로 바인딩하는 방법은 `` 요소와 매우 유사합니다. `v-model` 디렉티브를 사용하여 `` 요소의 값을 Vue 데이터 모델과 양방향으로 바인딩할 수 있습니다. -Vue.js 코드 textarea 태그도 input 태그와 같이 v-model을 사용하여 데이터 바인딩을 할 수 있습니다. -textarea 데이터 바인딩 테스트 2023. 8. 26. [Vue.js] - Vue input type text와 number 데이터 바인딩 하는 방법 #vue input type이란? Vue에서 `input` 요소의 `type` 속성은 사용자로부터 입력을 받을 때 어떤 종류의 데이터를 입력받을지를 지정하는 데 사용됩니다. `type` 속성은 다양한 입력 유형을 지정할 수 있으며, 각 유형은 특정한 유효성 검사 및 기능을 제공합니다. 일반적으로 사용되는 몇 가지 `type` 속성 값은 다음과 같습니다: - `text`: 일반 텍스트를 입력하기 위한 기본 유형입니다. - `number`: 숫자 값을 입력받기 위한 유형입니다. 숫자 외에는 입력할 수 없으며, 숫자와 관련된 유효성 검사가 자동으로 수행됩니다. - `email`: 이메일 주소를 입력받기 위한 유형입니다. 이메일 형식에 맞지 않는 입력은 경고를 표시합니다. - `password`: 비밀번호를 입.. 2023. 8. 26. 이전 1 2 3 4 5 다음 728x90 반응형
