이 글에서는 주로 vue v-model 양식 제어 바인딩 관련 정보를 자세히 소개하며, 이는 특정 참조 값이 있습니다. 관심 있는 친구는 양방향 데이터 바인딩 생성에서
v-model 명령을 참조할 수 있습니다. 양식 제어 요소에 대한 예는 아래에 설명되어 있습니다.
1. v-model 양방향 바인딩 텍스트
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="vue.js"></script> </head> <body> <p id="app"> <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> </p> </body> <script> var vm = new Vue({ el:"#app", data: { message: '绑定文本' } }) </script> </html>
출력 결과:
2. - 모델은 위의 예와 유사하게 여러 줄의 텍스트를 양방향으로 바인딩합니다.
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="vue.js"></script> </head> <body> <p id="app"> <<span>Multiline message is:</span> <p style="white-space: pre">{{ message }}</p> <br> <textarea v-model="message" placeholder="add multiple lines"></textarea> </p> </body> <script> var vm = new Vue({ el:"#app", data: { message: '绑定多行文本' } }) </script> </html>
출력 결과:
3. v-model 바인딩 확인란
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="vue.js"></script> </head> <body> <p id="app"> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> </p> </body> <script> var vm = new Vue({ el:"#app", data: { checked: 'true' } }) </script> </html>
출력 결과: 선택하면 true, 선택하지 않으면 false 🎜>
4. v-model 바인딩
라디오 버튼<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="vue.js"></script> </head> <body> <p id="app"> <input type="checkbox" id="jack" value="刘二狗" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="张麻子" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="小狗子" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> </p> </body> <script> var vm = new Vue({ el:"#app", data: { checkedNames: [] } }) </script> </html>
출력 결과:
5. v-model 바인딩드롭다운 목록
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="vue.js"></script> </head> <body> <p id="app"> <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <br> <span>Picked: {{ picked }}</span> </p> </body> <script> var vm = new Vue({ el:"#app", data: { picked: '' } }) </script> </html>
출력 결과:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="vue.js"></script> </head> <body> <p id="app"> <select v-model="selected"> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </p> </body> <script> var vm = new Vue({ el:"#app", data: { selected: '' } }) </script> </html>출력 결과:
6. 동적 옵션, 렌더링에 v-사용:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="vue.js"></script> </head> <body> <p id="app"> <select v-model="selected" multiple style="width: 50px"> <option>A</option> <option>B</option> <option>C</option> </select> <br> <span>Selected: {{ selected }}</span> </p> </body> <script> var vm = new Vue({ el:"#app", data: { selected: [] } }) </script> </html>
[관련 권장 사항]
1. Javascript는 무료입니다. 동영상 튜토리얼
2.다단계 메뉴바의 JS 구현 코드 예시
3 .
Nodejs에서 일반적으로 사용되는 미들웨어 본문 파서의 자세한 예
4. JavaScript 양식 검증 구현 코드_javascript 기술
위 내용은 vue v-model 양식 제어 바인딩의 예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!