v-modelの使用

フォームコントロールは、実際の開発において非常に一般的であり、特にユーザ情報の送信には、大量のフォーム

が必要である.

vueでv-model命令を使用してフォーム要素とデータの双方向バインド

を実現する

<input type = 'text' v-model='message'>
<h1>{{message}}</h1>
data(){
return {
message:""
}}

v-modelはv-bindとv-onの結合

と見なすことができる.

<input type = 'text' :value='message' @input='$event.target.value = message'/>
<h1>{{message}}</h1>
data(){
return {
message:""
}

v-model:radio

<div>
<label for='male'>
<input type='radio' value = 'male' v-model='sex'> 
</label>
<label for='female'>
<input type='radio' value = 'female' v-model='sex'> 
</label>
</div>
data(){
return{
sex:""
}}

v-model:checkbox

//             
//     ：v-model  boolean 
              value    v-model
//     
//data          
//      ，  input value       
<div>
<label for='agree'>
<input type='checkbox' value = 'female' v-model='isAgree'>    
</label>
<input type="checkbox" value="  “ v-model="hobbies">
<input type="checkbox" value="  “ v-model="hobbies">
<input type="checkbox" value="  “ v-model="hobbies">
<input type="checkbox" value="  “ v-model="hobbies">
</div>
data(){
return {
isAgree:false，
hobbies:[]
}}

v-model:select

//select          
//     
//v-model      
//     option    。     option value  v-model    
//  
//v-model        
//       ，     v-model