上一篇文章講解“vue.js指令v-on”，本篇文章講解“vue.js指令v-model”。
雙向數據綁定v-model：
現階段，注意是現階段可簡單的理解為，讓多個元素(或組件)都綁定同一個值的時候，一個元素改變該值，另一個元素也會因此而發生變化(樣式/dom結構等)的功能叫雙向數據綁定。
1. 雙向數據綁定應用
【例】一個簡單的v-model的瞭解。
瀏覽器訪問：
2. 表單組件綁定
你可以用v-model指令在表單及
1）基礎用法
v-model會忽略所有表單元素的value、checked、selected特性的初始值而總是將Vue實例的數據作為數據來源。你應該通過JavaScript 在組件的data選項中聲明初始值。
①文本
瀏覽器訪問：
②多行文本
瀏覽器訪問：
注：vue對象中，定義變量message。
③複選框
a. 單個複選框，綁定到布爾值：
瀏覽器訪問：
b. 多個複選框，綁定到同一個數組：
瀏覽器訪問：
注意
1. 單個複選框，綁定到布爾值，返回true或false。
2. 多個複選框綁定到同一數組，值為複選框value。
④單選按鈕
瀏覽器訪問：
⑤下拉列表
a. 單選時
瀏覽器訪問：
注意
1. 如果v-model表達式的初始值未能匹配任何選項，
b. 多選時
瀏覽器訪問：
2）修飾符
① .lazy
在默認情況下，v-model在每次input事件觸發後將輸入框的值與數據進行同步（除了上述輸入法組合文字時）。你可以添加lazy修飾符，從而轉變為使用change事件進行同步：
瀏覽器訪問：
② .number
如果想自動將用戶的輸入值轉為數值類型，可以給v-model添加number修飾符：
瀏覽器訪問：
注意
1. 這通常很有用，因為即使在type="number"時，HTML輸入元素的值也總會返回字符串。
③ .trim
如果要自動過濾用戶輸入的首尾空白字符，可以給v-model添加trim修飾符：
瀏覽器訪問：
測驗：
1. 用input和textarea同時“雙向綁定”同一個數值，同時通過這個數值來控制一個div的高度，用checkbox來控制其是否有邊框，用radio控制其是否顯示，用select控制其背景色。
測驗：（以下僅作為參考）
瀏覽器訪問：
關注卓象程序員，定期發佈技術文章
下一篇講解“vue.js指令v-cloak”
閱讀更多 卓象程序員 的文章
