指定vue的v-model的类型
作为一个菜鸟，兼只会依葫芦画瓢的搬砖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>
指定vue的v-model的类型的更多相关文章
- Django model字段类型清单
转载:<Django model字段类型清单> Django 通过 models 实现数据库的创建.修改.删除等操作,本文为模型中一般常用的类型的清单,便于查询和使用: AutoField ...
- Django model 字段类型及选项解析---转载
model field 类型1.AutoField() 自增的IntegerField,通常不用自己设置,若没有设置主键,Django会自动添加它为主键字段,Django会自动给每张表添加一个自增的p ...
- Django model 字段类型清单
Django model字段类型清单 Django 通过 models 实现数据库的创建.修改.删除等操作,本文为模型中一般常用的类型的清单,便于查询和使用: AutoField 一个自动递增的整型字 ...
- System.Security.Cryptography.CryptographicException: 指定了无效的提供程序类型
这两天在调用银联在线的支付接口,把银联提供的demo代码copy过来放到自己网站上,生成通过了,但是运行的时候就报错了: 指定了无效的提供程序类型. 说明: 执行当前 Web 请求期间,出现未经处理的 ...
- python-django 模型model字段类型说明
V=models.CharField(max_length=None<, **options>) #varchar V=models.EmailField(<max_length=7 ...
- Asp.CAore往Vue前端传application/octet-stream类型文件流
题外话:当传递文件流时要确定文件流的类型,但也有例外就是application/octet-stream类型,主要是只用来下载的类型,这个类型简单理解意思就是通用类型类似 var .object.ar ...
- Django——model字段类型 2
Django 通过models实现数据库的创建.修改.删除等操作,Django中model作为数据资源指定了字段以及一些相应的功能,通常每个model对应数据库中的一张表,(每个model都是从dja ...
- Django文档——Model字段类型(Field Types)
大部分内容参考自http://wrongwaycn.github.io/django11/topics/db/models/index.html#topics-db-models ,内容是django ...
- Django model 字段类型及选项解析
字段类型选择: AutoField(Field) - int自增列,必须填入参数 primary_key=True BigAutoField(AutoField) - bigint自增列,必须填入参数 ...
随机推荐
- 利用requests和BeautifulSoup爬取菜鸟教程的代码与图片并保存为markdown格式
还是设计模式的开卷考试,我想要多准备一点资料,于是写了个爬虫爬取代码与图片,有巧妙地进行格式化进一步处理,最终变为了markdown的格式 import requests from bs4 impor ...
- vue-class-component使用Mixins
vue-class-component提供了mixinshelper函数,以类样式的方式使用mixins.通过使用mixins帮助程序,TypeScript可以推断mixin类型并在组件类型上继承它们 ...
- javascript domAPI整理
对一般兼容性和特点做了标识(主要是ie8+) 节点类型 节点类型 节点值 标签节点(Element) 1 属性节点(Attr) 2 文本节点(Text) 3 CDATA节点(CDATASetion) ...
- （一）初识EasyTouch
Easy Touch是一个手指触控(可以鼠标)的插件,可以非常方便的实现各种功能,使用插件第一步是添加Easy Touch组件,可以右键添加也可以在一个空的游戏物体上添加Easy Touch脚本(非事 ...
- SpringBoot接管SpringMvc
SpringBoot接管SpringMvc Spring Web MVC framework(通常简称为“Spring MVC”)是一个丰富的“model 视图控制器”web framework. S ...
- Java中的substring()用法
String str = "Hello Java World!"; Method1: substring(int beginIndex) 返回从起始位置(beginIndex)至 ...
- mui iOS云打包修改权限提示语
打包提交appstore如果用到了如下权限需要修改提示语,详细描述使用这个权限的原因,如不修改提示语appstore审核可能会被拒绝 设置方法如下: 使用视图方式打开manifest.json文件, ...
- 机器学习 AI 谷歌ML Kit 与苹果Core ML
概述 移动端所说的AI,通常是指"机器学习". 定义:机器学习其实就是研究计算机怎样模拟人类的学习行为,以获取新的知识或技能,并重新组织已有的知识结构使之不断改善自身.从实践的意义 ...
- 零基础攻略！如何使用kubectl和HPA扩展Kubernetes应用程序
现如今,Kubernetes已经完全改变了软件开发方式.Kubernetes作为一个管理容器化工作负载及服务的开源平台,其拥有可移植.可扩展的特性,并促进了声明式配置和自动化,同时它还证明了自己是管理 ...
- [考试反思]1104csp-s模拟测试100： 终结
这么好的整数场,就终结了我连续莫名考好的记录. 功德圆满了... 还是炸了啊.而且炸的还挺厉害(自己又上不去自己粘的榜单啦) 说实在的这场考试做的非常差劲.虽说分数不算特别低但是表现是真的特别差. T ...