# v-model <div style="color: pink;font-size:24px">小常识:</div> v-model 指令我们大家很熟悉了吧,该指令可以在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。 v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。 **文本框** 下面代码中p标签的值会根据上方文本框输入的值的改变而改变。 ```html <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> ``` **复选框** ```html <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> ``` 多个复选框 ```html <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> ``` **选择框** ```html <div id="example-5"> <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div> ``` 上面只是为大家举了几个小案例,当然我们v-model绑定的值一定是我们在data中定义好的! <br> <div style="color: pink;">小测试:</div > 下列关于 v-model 的说法,哪项是不正确的?<br/><br/> ## 答案 v-model 是内置指令,不能用在自定义组件上 ## 选项 ### A v-model 能实现双向绑定 ### B v-model 本质上是语法糖,它负责监听用户的输入事件以更新数据 ### C 对 input 使用 v-model,实际上是指定其 :value 和 @input