vue v-model

1.雙向綁定

<input v-model="message">

<script>
data:{
message:'hello'
}
</script>

//v-model   相當於有v-on & v-bind

<input type="text" :value="message" v-on:input="valueChange">



methods:{
 valueChange(event){
  this.message = event.target.value;

}}

 

2.v-model 結合radio使用

<label for="male">
  <input type="radio" id ="male" v-model="sex">男
</label>

<label for="female">
  <input type="radio" id ="female" v-model="sex">女
</label>
<h3>選中的是：{{sex}}</h3>


data:{
  sex:''
}

3.v-model 結合checkbox使用

//多選框
 <input type="checkbox" v-model="hobbies" value="籃球">籃球
 <input type="checkbox" v-model="hobbies" value="足球">足球
 <input type="checkbox" v-model="hobbies" value="羽毛球">羽毛球
 <input type="checkbox" v-model="hobbies" value="棒球">棒球

data:{
    hobbies:[]
  
}
//單選框  勾選同意協議後才能點擊下一步的按鈕

<label>
   <input type="checkbox" v-model="isAgree" id="agree">同意協議
</label>
<button :disabled="!isAgree">下一步</button>

data:{
 isAgree:false
}

3. v-model 結合select使用

//單選
<select name="ab" v-model="fruit">
  <option value="蘋果">蘋果</option>
  <option value="香蕉">香蕉</option>
  <option value="葡萄">葡萄</option>
  <option value="梨子">梨子</option>
</select>

data:{
   fruit:''
}


//多選
<select name="abc" v-model="fruit" multiple>
  <option value="蘋果">蘋果</option>
  <option value="香蕉">香蕉</option>
  <option value="葡萄">葡萄</option>
  <option value="梨子">梨子</option>
</select>

data:{
   fruit:[]
}

4.v-model修飾符

  lazy:失去焦點或者回車才會更新

 number:數字類型

 trim:刪除空格

<input type="text" v-model.lazy="message">


<input type="number" v-model.number="age">


<input type="text" v-model.trim="name">


<script>
  
 data:{
    message:'hello',
    age:19,
    name:'',
 }

</script>