这次给大家带来vue双向数据绑定实例详解，vue双向数据绑定的注意事项有哪些，下面就是实战案例，一起来看一下。
概念说明v-model指令：在表单控件元素上创建双向数据绑定。v-model 会根据控件类型自动选取正确的方法来更新元素。
输入框实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定：
html
<!doctype html><html><head><meta charset="utf-8"><title>vue双向数据绑定实例详解</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script></head><body><p id="app"> <p>input 元素：</p> <input v-model="message" placeholder="编辑我……"> <p>消息是: {{ message }}</p> <p>textarea 元素：</p> <p style="white-space: pre">{{ message2 }}</p> <textarea v-model="message2" placeholder="多行文本输入……"></textarea></p><script>new vue({ el: '#app', data: { message: 'runoob', message2: '菜鸟教程\r\nhttp://www.runoob.com' }})</script></body></html>
效果如图：
复选框复选框如果是单个为逻辑值，如果是多个则绑定到同一个数组：
html
<!doctype html><html><head><meta charset="utf-8"><title>vue 测试实例 - 菜鸟教程(runoob.com)</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script></head><body><p id="app"> <p>单个复选框：</p> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> <p>多个复选框：</p> <input type="checkbox" id="runoob" value="runoob" v-model="checkednames"> <label for="runoob">runoob</label> <input type="checkbox" id="google" value="google" v-model="checkednames"> <label for="google">google</label> <input type="checkbox" id="taobao" value="taobao" v-model="checkednames"> <label for="taobao">taobao</label> <br> <span>选择的值为: {{ checkednames }}</span></p><script>new vue({ el: '#app', data: { checked : false, checkednames: [] }})</script></body></html>
效果如图：
单选按钮html
<!doctype html><html><head><meta charset="utf-8"><title>vue 测试实例</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script></head><body><p id="app"> <input type="radio" id="runoob" value="runoob" v-model="picked"> <label for="runoob">runoob</label> <br> <input type="radio" id="google" value="google" v-model="picked"> <label for="google">google</label> <br> <span>选中值为: {{ picked }}</span></p><script>new vue({ el: '#app', data: { picked : 'runoob' }})</script></body></html>
效果如图：
下拉列表html
<!doctype html><html><head><meta charset="utf-8"><title>vue 测试实例 - 菜鸟教程(runoob.com)</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script></head><body><p id="app"> <select v-model="selected" name="fruit"> <option value="">选择一个网站</option> <option value="www.runoob.com">runoob</option> <option value="www.google.com">google</option> </select> <p id="output"> 选择的网站是: {{selected}} </p></p><script>new vue({ el: '#app', data: { selected: '' }})</script></body></html>
效果如图：
修饰符.lazy
在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：
<!-- 在 "change" 而不是 "input" 事件中更新 --><input v-model.lazy="msg" >
.number
如果想自动将用户的输入值转为 number 类型（如果原值的转换结果为 nan 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：
<input v-model.number="age" type="number">
这通常很有用，因为在 type=number 时 html 中输入的值也总是会返回字符串类型。
.trim
如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：
<input v-model.trim="msg">
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
使用koa2实现文件上传下载
html字符串转换为html标签并使用
以上就是vue双向数据绑定实例详解的详细内容。