vue에서 "v-model"은 양식 입력을 해당 모델 데이터에 바인딩하는 데 사용되며, 이는 양방향 바인딩을 달성할 수 있습니다. 여기에는 "v-bind" 바인딩 값 속성과 "v-on" 모니터링 양식 요소가 포함됩니다. 입력 이벤트와 데이터 변경의 두 가지 작업은 "v-model="message""입니다.
이 기사의 운영 환경: Windows 10 시스템, Vue 버전 2.9.6, DELL G3 컴퓨터.
v-model은 폼 입력을 해당 모델 데이터에 바인딩할 수 있습니다
v-model을 통해 간단한 요구사항을 구현합니다
폼 입력을 통해 모델 데이터 메시지를 바인딩합니다. 데이터 변경, data.message도 변경
그러면 변경된 메시지 데이터가 Mustache 표현식을 통해 보기 페이지에 표시됩니다.
v-model은 실제로 약어인 구문 설탕입니다.
v-bind 바인딩 값 속성
v-on은 form 요소의 입력 이벤트를 듣고 데이터를 변경합니다.
(1) 기본 사용
<div id="app"> <input type="text" v-model="message"> {{message}} </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello' } }) </script>
v-model 양방향 데이터 바인딩을 달성할 수 있습니다. 일반적인 방법은 페이지가 데이터에서 데이터를 얻는 것입니다. v-model을 사용하면 양방향 바인딩이 가능합니다. 즉, 페이지가 변경되면 데이터도 변경됩니다
(2) 구현 원칙
<div id="app"> <input type="text" :value="message" @input="message = $event.target.value"> <h2>{{message}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello' }, methods: { valueChange(event) { this.message = event.target.value; } } }) </script>
이것은 수동으로 구현된 양방향 바인딩입니다
[관련 권장 사항: "vue.js tutorial"]
위 내용은 vue에서 v-model의 사용법은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!