> 在表单 `<input>`、`<textarea>` 及`<select>`元素控件或者组件上创建双向绑定，它负责监听用户的输入事件以更新数据 ### 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. 复选框 --- ```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="">请选择</option> <option value="1">郑州</option> <option value="2">开封</option> <option value="3">南阳</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> ```