> 在表單 `<input>`、`<textarea>` 及`<select>`元素控件或者組件上創(chuàng)建雙向綁定，它負(fù)責(zé)監(jiān)聽(tīng)用戶(hù)的輸入事件以更新數(shù)據(jù) ### 1. 普通文本框 --- ```html <div id="app"> <p>{{ msg }}</p> <input type="text" v-model="msg"> </div> <script> let vm = new Vue({ el: '#app', data: { msg: 123, }, }) </script> ``` #### 2. 單選框 --- ```html <div id="app"> <p>{{ sex }}</p> 男 <input type="radio" value="男" v-model="sex"> 女 <input type="radio" value="女" v-model="sex"> </div> <script> let vm = new Vue({ el: '#app', data: { sex: 1, }, }) </script> ``` #### 3. 復(fù)選框 --- ```html <div id="app"> <p>{{ language }}</p> PHP <input type="checkbox" value="PHP" v-model="language"> Java <input type="checkbox" value="Java" v-model="language"> Python <input type="checkbox" value="Python" v-model="language"> </div> <script> let vm = new Vue({ el: '#app', data: { language: ['PHP'] }, }) </script> ``` #### 4. 多行文本框 --- ```html <div id="app"> <p>{{ content }}</p> <textarea v-model="content"></textarea> </div> <script> let vm = new Vue({ el: '#app', data: { content: 123 }, }) </script> ``` #### 5. 下拉選擇框 --- ```html <div id="app"> <p>{{ city }}</p> <select v-model="city"> <option disabled value="">請(qǐng)選擇</option> <option value="1">鄭州</option> <option value="2">開(kāi)封</option> <option value="3">南陽(yáng)</option> </select> </div> <script> let vm = new Vue({ el: '#app', data: { city: 2 }, }) </script> ``` #### 6. 修飾符 `trim` 清除兩邊的空格 --- ```html <div id="app"> <p>{{ content.length }}</p> <input type="text" v-model.trim="content"> </div> <script> let vm = new Vue({ el: '#app', data: { content: '' }, }) </script> ```