v-model雙向綁定

v-model雙向綁定

v-model的用法

• v-model是表單和數據的雙向綁定
• 通俗講也就是value和data的雙向綁定

v-model的原理

v-model其實是一個語法糖，它的背后本質上是包含兩個操作：

1. v-bind綁定一個value屬性

2. v-on指令給當前元素綁定input事件

等同於下面的代碼

//input中有一個input屬性，可以動態檢測輸入框是否更新
<input type="text" v-bind:value="message" 
v-on:input="message = $event.target.value">
  
  //js寫法
  <input type="text" v-bind:value="message" 
   v-on:input="changeMse">
     
 data:{
   message:''
 },
   methods:{
     changeMse(event){
       this.message = event.target.value;
     }
   }

v-model與input-radio的結合

1. 兩個input-radio都寫v-model的時候可以不用寫name互斥
2. 使用v-model時，給data添加與value相同的數據時，input-radio也會自動選中

v-model與input-checkbox的結合

1. 當checkbox是單選框時，v-model傳入布爾值，選中為true，未選中false
2. 當checkbox是多選框時，input中設置value，v-model傳入空數組，
   選中則把當前input的value值傳入數組中

v-model與select>option的結合

select一般用的少

select中傳入v-model，v-model傳入空數組。option中傳入value，
選中時則把當前選項傳入數組中

v-model修飾符

• lazy修飾符

  • 默認input中v-model是同步更新value的，lazy可以在失去焦點或回車后才更新

• number修飾符

  • 默認input輸入的值無論數字字母都會被當作字符串進行處理，
  • number可以直接把內容轉換成等number類型。
  • 也有人說直接使用input中type=number，但在v-model轉換的時候還是會把值轉換成字符串，
  • 所以使用v-model時需要number類型還是用number修飾符把

• trim修飾符

  • 去除內容中左右兩邊空格