一、可以使用v-model的标签
你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
二、双向绑定
双向绑定：数据改变时会自动更新视图，视图发生变化时会更新数据。
<div id="app"> <input v-model="name" type="text"> {{name}} </div> <script> const vm = new vue({ el: "#app", data: { name: "么么哒" } }); </script>
1.v-model在input的下拉框、单选按钮、复选框中的应用
如下面代码，分别是v-model在input不同的组件中的应用，但是大体用法相同。注意：像下面代码中复选框这样需要接收多条数据的情况下，在data里面应该由数组与其对应二不是字符串。
这里有一个值绑定的问题，不管是下拉框或者单选按钮还是复选框，我们都可以在对应的标签内设置value。以下拉框为例，我们在<option>中添加了vulue=“A被选”，当我们选择第一个下拉框A的时候，在selected中的字符串为‘A被选'，如果我们不在<option>中设置value值的话那么selected中的字符串将是<option>中的值‘A'。
这里还有一个和vue无关的问题，比较简单，但是由于平时主要做后台java开发没太注意这个前端问题。以下面的单选按钮代码为例，<label>标签内有一个for元素与input中的id值对应(两个值相同)，刚开始不太理解为什么这么写，这个对前端人员来说应该是一个很简单的问题。这样写的目的没有其它任何作用，只是label元素为鼠标改进了可用性，在点击label的时候也相当于点击了对应的input控件，点击label标签也可以触发input标签控件。例如单选按钮在加了for之后点击small也可以选择对应按钮，但是如果不加for是没有任何反应的。
<!--下拉框--> <div id="app"> <select v-model="selected"> <option value="A被选">A</option> <option value="B被选">B</option> <option value="C被选">C</option> </select> <span>Selected: {{ selected }}</span> </div> <script src="/resources/js/vue.js"></script> <script> new Vue({ el: '#app', data: { selected: '' } }); </script> <!--单选按钮--> <div id="app"> <input type="radio" id="small" value="small_value" v-model="picked"> <label for="small">small</label> <br> <input type="radio" id="big" value="big_value" v-model="picked"> <label for="big">big</label> <br> <span>Picked: {{ picked }}</span> </div> <script src="/resources/js/vue.js"></script> <script> new Vue({ el: '#app', data: { picked: '' } }) </script> <!--复选框--> <div id="app"> <input type="checkbox" id="one" value="value_one" v-model.lazy="checkedNames"> <label for="one">选项一</label> <input type="checkbox" id="two" value="value_two" v-model.lazy="checkedNames"> <label for="two">选项二</label> <input type="checkbox" id="three" value="value_three" v-model.lazy="checkedNames"> <label for="three">选项三</label> <br> <span>Checked names: {{ checkedNames }}</span> </div> <script src="/resources/js/vue.js"></script> <script> new Vue({ el: '#app', data: { checkedNames: [] } }) </script>
2.v-model修饰符
v-model也可以和.lazy、.trim和.number这些修饰符一起使用。
<!-- 在每次 input 事件触发后将输入框的值与数据进行同步，添加 lazy 修饰符，从而转变为使用 change 事件进行同步 --> <input v-model.lazy="msg" > <!--去除字符串首尾的空格--> <input v-model.trim="msg"> <!--将数据转化为值类型--> <input v-model.number="age" type="number">
下面在单独给大家介绍下vue中v-model使用
v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：
1. v-bind绑定一个value属性
2. v-on指令给当前元素绑定input事件
自定义组件使用v-model，应该有以下操作：
1. 接收一个value prop
2. 触发input事件，并传入新值
在原生表单元素中：
<input v-model="inputValue">
相当于
<input v-bind:value="inputValue" v-on:input="inputValue = $event.target.value">
在自定义组件中
<my-component v-model="inputValue"></my-component>
相当于
<my-component v-bind:value="inputValue" v-on:input="inputValue = argument[0]"></my-component>
这个时候，inputValue接受的值就是input事件的回调函数的第一个参数，所以在自定义组件中，要实现数据绑定，还需要$emit去触发input的事件。
this.$emit('input', value)
我是小白，期待和优秀的你一起同行!
