作为一个菜鸟,兼只会依葫芦画瓢的搬砖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是一个指令,限制在、
修饰符.lazy(取代 input 监听 change 事件)、.number(输入字符串转为有效的数字)、.trim(输入首尾空格过滤)。
它其实是一个语法糖。
v-model 的实现原理
以上的原理很详细,但是有些复杂,我没啥耐心开。。。。
找个了一些通俗的例子:原文在这里
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">
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>
div>
<script>
Vue.component('my-input', {
template: '',
props: {
value: String
},
methods: {
doThis() {
this.$emit('input', this.$refs.input.value);
}
}
});
new Vue({
el: '#app3',
data: {
price: '10'
}
});
script>
body>
html>