作为一个菜鸟，兼只会依葫芦画瓢的搬砖it狗，并没有系统学习过vue。
在最近项目中，发现了一个奇怪的问题：
使用vant-ui 的field
<van-field v-model="form.unitPrice" //form。unitPrice是js的number类型 type="number" label="大货价：" >
当请求数据，将赋值时，this.form.unitPrice = res.unitPrice时，在NetWork中看到 res.unitPrice是float类型的，
但是在输入框中修改了值，在上传后，重新请求返回的res.unitPrice变成了String类型。
公司大神告诉我做如下修改即可：
v-model.number="form.unitPrice"
还不知道是啥原因导致的，不过，这促使我找了下v-model的相关资料：
Vue的核心特性之一是双向绑定，vue的响应式原理是实现了数据－>视图，接下来我们要学习 视图－>数据的原理。
v-model是一个指令，限制在<input>、<select>、<textarea>、components中使用，
修饰符.lazy(取代 input 监听 change 事件)、.number(输入字符串转为有效的数字)、.trim(输入首尾空格过滤)。
它其实是一个语法糖。
以上的原理很详细，但是有些复杂，我没啥耐心开。。。。
找个了一些通俗的例子：原文在这里
HTML元素的v-model -输入框(text)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-model指令</title> <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script> </head> <body> <div id="app4"> {{price}}<br> <input v-model="price"><!-- 右边注释的代码相当于该语法糖 --><!-- <input :value="price" @input="price = $event.target.value"> --> </div> <script> new Vue({ el: '#app4', data: { price: '20' } }); </script> </body> </html>
组件的v-model - 输入框(text)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-model指令</title> <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script> </head> <body> <div id="app3"> {{price}} <my-input v-model="price"></my-input><!-- 右边注释的代码相当于该语法糖 --><!-- <my-input :value="price" @input="val => {price = val}"></my-input> --> </div> <script> Vue.component('my-input', { template: '<div><input type="text" ref="input" :value="value" @input="doThis"/></div>', props: { value: String }, methods: { doThis() { this.$emit('input', this.$refs.input.value); } } }); new Vue({ el: '#app3', data: { price: '10' } }); </script> </body> </html>