이번에는 Vue.js의 폼 입력 바인딩을 가져오겠습니다. Vue.js 폼 입력 바인딩의 notes는 무엇인가요?
v-model을 사용하면 양식 요소의 값과 배경 데이터 간의 양방향 바인딩을 구현할 수 있습니다. 구체적인 사용법은 다음과 같습니다.
<!--文本--> <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> <!--checkbox多个复选框绑定(value)到数组,单个v-model绑定到布尔值即可--> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">单个复选框</label> <br> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> <br><br> <!--单选radio--> <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> <br><br> <!--选择框select,多选时绑定到数组,可用v-for渲染动态选项--> <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Single selected: {{ selected }}</span> <br><br> <select v-model="multiSelected" multiple style="width: 50px;"> <option>A</option> <option>B</option> <option>C</option> </select> <br> <span>Multiple Selected: {{ multiSelected }}</span>
v-model에 수정자를 추가할 수 있습니다.
v-model.lazy - - 동기화를 위해 이벤트를 사용하도록 입력 이벤트 change
를 변환합니다.
.number - 값을 숫자 값으로 자동 변환합니다.
.trim -- 입력에서 앞뒤 공백을 제거합니다.
이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
위 내용은 Vue.js에 대한 양식 입력 바인딩의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!