作为一个菜鸟,兼只会依葫芦画瓢的搬砖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(输入首尾空格过滤)。

它其实是一个语法糖。

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"><!-- 右边注释的代码相当于该语法糖 --><!-- <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>

指定vue的v-model的类型的更多相关文章

  1. Django model字段类型清单

    转载:<Django model字段类型清单> Django 通过 models 实现数据库的创建.修改.删除等操作,本文为模型中一般常用的类型的清单,便于查询和使用: AutoField ...

  2. Django model 字段类型及选项解析---转载

    model field 类型1.AutoField() 自增的IntegerField,通常不用自己设置,若没有设置主键,Django会自动添加它为主键字段,Django会自动给每张表添加一个自增的p ...

  3. Django model 字段类型清单

    Django model字段类型清单 Django 通过 models 实现数据库的创建.修改.删除等操作,本文为模型中一般常用的类型的清单,便于查询和使用: AutoField 一个自动递增的整型字 ...

  4. System.Security.Cryptography.CryptographicException: 指定了无效的提供程序类型

    这两天在调用银联在线的支付接口,把银联提供的demo代码copy过来放到自己网站上,生成通过了,但是运行的时候就报错了: 指定了无效的提供程序类型. 说明: 执行当前 Web 请求期间,出现未经处理的 ...

  5. python-django 模型model字段类型说明

    V=models.CharField(max_length=None<, **options>) #varchar V=models.EmailField(<max_length=7 ...

  6. Asp.CAore往Vue前端传application/octet-stream类型文件流

    题外话:当传递文件流时要确定文件流的类型,但也有例外就是application/octet-stream类型,主要是只用来下载的类型,这个类型简单理解意思就是通用类型类似 var .object.ar ...

  7. Django——model字段类型 2

    Django 通过models实现数据库的创建.修改.删除等操作,Django中model作为数据资源指定了字段以及一些相应的功能,通常每个model对应数据库中的一张表,(每个model都是从dja ...

  8. Django文档——Model字段类型(Field Types)

    大部分内容参考自http://wrongwaycn.github.io/django11/topics/db/models/index.html#topics-db-models ,内容是django ...

  9. Django model 字段类型及选项解析

    字段类型选择: AutoField(Field) - int自增列,必须填入参数 primary_key=True BigAutoField(AutoField) - bigint自增列,必须填入参数 ...

随机推荐

  1. 利用requests和BeautifulSoup爬取菜鸟教程的代码与图片并保存为markdown格式

    还是设计模式的开卷考试,我想要多准备一点资料,于是写了个爬虫爬取代码与图片,有巧妙地进行格式化进一步处理,最终变为了markdown的格式 import requests from bs4 impor ...

  2. vue-class-component使用Mixins

    vue-class-component提供了mixinshelper函数,以类样式的方式使用mixins.通过使用mixins帮助程序,TypeScript可以推断mixin类型并在组件类型上继承它们 ...

  3. javascript domAPI整理

    对一般兼容性和特点做了标识(主要是ie8+) 节点类型 节点类型 节点值 标签节点(Element) 1 属性节点(Attr) 2 文本节点(Text) 3 CDATA节点(CDATASetion) ...

  4. (一)初识EasyTouch

    Easy Touch是一个手指触控(可以鼠标)的插件,可以非常方便的实现各种功能,使用插件第一步是添加Easy Touch组件,可以右键添加也可以在一个空的游戏物体上添加Easy Touch脚本(非事 ...

  5. SpringBoot接管SpringMvc

    SpringBoot接管SpringMvc Spring Web MVC framework(通常简称为“Spring MVC”)是一个丰富的“model 视图控制器”web framework. S ...

  6. Java中的substring()用法

    String str = "Hello Java World!"; Method1:  substring(int beginIndex) 返回从起始位置(beginIndex)至 ...

  7. mui iOS云打包修改权限提示语

    打包提交appstore如果用到了如下权限需要修改提示语,详细描述使用这个权限的原因,如不修改提示语appstore审核可能会被拒绝 设置方法如下: 使用视图方式打开manifest.json文件, ...

  8. 机器学习 AI 谷歌ML Kit 与苹果Core ML

    概述 移动端所说的AI,通常是指"机器学习". 定义:机器学习其实就是研究计算机怎样模拟人类的学习行为,以获取新的知识或技能,并重新组织已有的知识结构使之不断改善自身.从实践的意义 ...

  9. 零基础攻略!如何使用kubectl和HPA扩展Kubernetes应用程序

    现如今,Kubernetes已经完全改变了软件开发方式.Kubernetes作为一个管理容器化工作负载及服务的开源平台,其拥有可移植.可扩展的特性,并促进了声明式配置和自动化,同时它还证明了自己是管理 ...

  10. [考试反思]1104csp-s模拟测试100: 终结

    这么好的整数场,就终结了我连续莫名考好的记录. 功德圆满了... 还是炸了啊.而且炸的还挺厉害(自己又上不去自己粘的榜单啦) 说实在的这场考试做的非常差劲.虽说分数不算特别低但是表现是真的特别差. T ...