v-model 지시문을 사용하여 양식 제어 요소에 대한 양방향 데이터 바인딩을 만들 수 있습니다. 이 글은 주로 Vue Forms에 대한 자세한 설명을 소개합니다. 필요하신 친구들은 참고하시면 됩니다 1. 기본 사용법 v-model 명령을 사용하여 및 요소 데이터 바인딩. </p> <p>그러나 v-model은 본질적으로 단지 구문 설탕일 뿐입니다. 사용자 입력 이벤트를 수신하여 데이터를 업데이트하고 일부 극단적인 시나리오에 대한 특수 처리를 수행하는 역할을 담당합니다. </p> <p>v-model은 모든 양식 요소의 value, selected 및 selected 속성의 초기 값을 무시하고 항상 Vue 인스턴스의 데이터를 데이터 소스로 사용합니다. 구성 요소의 데이터 옵션에서 JavaScript를 통해 초기 값을 선언해야 합니다. </p> <p>텍스트, 텍스트 영역, 라디오, 체크박스 및 선택의 기본 사용법을 읽은 후 코드 세트: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"><p id="app7"> <input type="text" v-model="message"><label>{{message}}</label></br> <textarea v-model="message1">{{message1}} 单选按钮 男 女 跑步 爬山 滑雪 请选择 html javascript css {{option.text}} var app7 = new Vue({ el: '#app7', data:{ message: '单行文本', message1: '多行文本', picked: true, sex: 'boy', hobby: ['爬山','滑雪'], select: 'css', selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] } });로그인 후 복사 2. 값 바인딩 라디오 버튼, 체크박스 및 선택 목록은 단독으로 사용하거나 단독으로 사용할 수 있습니다. 개별적으로 선택한 모드에서 v-model에 의해 바인딩된 값은 정적 문자열 또는 부울 값이지만 비즈니스에서는 동적 데이터를 바인딩해야 하는 경우가 있습니다. 이 경우 이를 달성하기 위해 v-bind를 사용할 수 있습니다. 양식에서 라디오, 체크박스 및 선택에 일반적으로 사용되는 값 바인딩을 읽은 후: 单选按钮 {{picked}} {{value}} 复选框 {{toggle}} {{value1}} {{value2}} 123 {{selected.number}} var app8 = new Vue({ el: '#app8', data:{ picked: false, value: 'boy', toggle: false, value1: 'a', value2: 'b', selected: '' } });로그인 후 복사3. 수정자 이벤트 수정자와 마찬가지로 v-model에도 제어용 수정자가 있습니다. 데이터 동기화 타이밍. 일반적으로 사용되는 수식어인 Lazy, Number, Trim을 읽은 후의 코드 {{message}} {{typeof number}} {{text}} var app9 = new Vue({ el: '#app9', data:{ message: '', number: '', text: '' } });로그인 후 복사위 내용은 모두를 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다. 관련 기사: Ajax에서 브라우저와 서버 간의 상호 작용에 대한 자세한 설명 AJAX의 제로 기반 학습을 위한 AJAX 프레임워크 자동 확인 양식을 생성하기 위한 AJAX의 제로 기반 학습
