今天的内容是v-model
双向数据绑定是Vue的灵魂特点之一，v-model是完美的体现了Vue双向绑定的特点。
你可以用 v-model 指令在表单 input、textarea 及 select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model 会忽略所有表单元素的 value、checked、selected，attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
文本
<div id="app">
<p>{
{message}}</p>
<h3>文本框</h3>
<p>v-model:<input type="text" v-model="message" /></p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'Hello'
}
});
</script>
你在输入框中输入的东西会很快的渲染到上方的p标签中，这样就完整了一个最基本的数据的双向绑定，非常的简单也非常的实用。
多行文本
<div id="app">
<h3>文本域</h3>
<textarea cols="30" rows="10" v-model="message"></textarea>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'Hello'
}
});
</script>
效果和单行文本相同，输入的内容会被立即绑定到message上，并渲染到页面上
复选框
<div id="app">
<h3>多选框绑定数组</h3>
<p>
<input type="checkbox" id="Ray" value="Ray" v-model="names">
<label>Ray</label>
<input type="checkbox" id="Creator" value="Creator" v-model="names">
<label>Creator</label>
<input type="checkbox" id="Code" value="Code" v-model="names">
<label>Code</label>
</p>
<p>{
{names}}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
names:[],
}
});
</script>
当我们对选项进行选择时，所选的内容会被立即绑定到names中，并以很快的速度渲染到页面上。
单选框
<div id="app">
<h3>单选框绑定</h3>
<p>
<input type="radio" id="m" value="男" v-model="sex">
<label>男</label>
<input type="radio" id="w" value="女" v-model="sex">
<label>女</label>
</p>
<p>{
{sex}}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
sex:''
}
});
</script>
效果和复选框基本类似，选择选项后，所选内容被绑定到sex，然后渲染在页面上。
除此之外，v-model还有一些修饰符
- .lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步： - .number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符： - .trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符
<div id="app">
<p>{
{message}}</p>
v-model的修饰符:
<p>v-model.lazy(懒加载):<input type="text" v-model.lazy="message" /></p>
<p>v-model.number(只绑定数字):<input type="text" v-model.number="message" /></p>
<p>v-model.trim(去空格至1个):<input type="text" v-model.trim="message" /></p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'Hello'
}
});
</script>
大家可以实际操作一下，看一下修饰符各自的功能，还是比较方便的。
v-model在处理表单输入绑定时，非常的方便、简单、灵活，大家多多尝试一下，可以试一下做个登录注册的小demo。
有微信小程序课设、毕设需求联系个人QQ：505417246
关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号，请大家多多关注，谢谢！
