遇見 vue.js --------阿文的vue.js學習筆記（10）------表單輸入繫結
遇見 vue.js --------阿文的vue.js學習筆記（10）------表單輸入繫結
**
新學習新徵程，我們一起踏上學習 vue.js的新長征
遇見 vue.js --------阿文的vue.js學習筆記（1）-----初識vue.js
遇見 vue.js --------阿文的vue.js學習筆記（2—1）----- 基本使用 [1]
遇見 vue.js --------阿文的vue.js學習筆記（2—2）----- 基本使用 [2]
… … …
遇見 vue.js --------阿文的vue.js學習筆記(目錄)
關注我，我們一起學習進步。
**
基礎用法
我們可以使用 v-model<input>、<textarea> 及 <select> 元素上建立雙向資料繫結。它會根據控制元件型別自動選取正確的方法來更新元素。並且負責監聽使用者的輸入事件以更新資料，並對一些極端場景進行一些特殊處理。
1、文字
簡單示例：當行文字的雙向資料繫結
2、多行文字
簡單示例：
3、複選框
簡單示例：勾選即為true 取消勾選則相當於把該項條件判斷為false
4、單選按鈕
簡單示例：
5、選擇框
簡單示例：
注意： （2）在文字區域插值 (
<textarea>{<!-- -->{text}}</textarea>) 並不會生效，而應該使用 v-model 來代替。
修飾符
1、.lazy
一般在預設的情況下，
v-model在每次 input 事件觸發後將輸入框的值與資料進行同步 。但是我們可以新增.lazy修飾符，從而轉為在 change 事件之後 再進行同步（你也可以理解為，資訊不再跟著我們輸入框同步改變，而是當我們輸入框輸入完成之後，在輸入框失去焦點之後，再進行二者的資訊同步）
簡單示例：
2、.number
在我們的
v-model的後面新增.number後可以實現自動將我們輸入的值轉化為數值型別
3、.trim
.trim用來自動過濾我們輸入的首尾空白字元，
簡單示例；這樣在我們的控制檯你講他打印出來會發現前面有很多空格， 但是加入.trim 之後將會將其 自動過濾掉