Vue.js에 대한 양식 입력 바인딩

이번에는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

JavaScript 최적화 DOM

교차 도메인 솔루션 요청 CORS

위 내용은 Vue.js에 대한 양식 입력 바인딩의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!