指定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自增列,必须填入参数 ...
随机推荐
- 数据结构（二十七）Huffman树和Huffman编码
Huffman树是一种在编码技术方面得到广泛应用的二叉树,它也是一种最优二叉树. 一.霍夫曼树的基本概念 1.结点的路径和结点的路径长度:结点间的路径是指从一个结点到另一个结点所经历的结点和分支序列. ...
- fenby C语言 P33
#include <stdio.h> int main(void){ char *ps="my dream is to be a programmer"; printf ...
- 定制linux镜像并自动化安装
最近碰到个需求:要在内网环境安装centos6.5系统并搭建服务,但由于自动部署脚本里安装依赖包使用的是yum安装,而服务器无法连接外网,实施人员也不会本地yum源搭建….. 本来想法是打算把需要的依 ...
- [考试反思]0910csp-s模拟测试42：追求
显而易见的暴力骗分. T1想到了bitset但是发现MLE后弃了,部分分都没拿. T2想到正解贪心打暴力过不了大样例弃了. T3牛逼题暴力. 考场没什么大失误,还可以. 不要轻易放弃每一个思路,可能再 ...
- CSPS模拟 62
婚礼现场系列 T1 $gragh$ 为了方便把边的贡献下放到点,跑一个生成树作为划分依据. T2 $permutation$ 由于在本题中,构造的变换方法保证只能邻项交换 所以如果位置串字典序变小,权 ...
- Kubernetes5-集群上搭建基于redis和docker的留言薄
一.简介 1.环境依旧是kubernetes之前文章的架构 2.需要docker的镜像 1)php-forntend web 前端镜像 docker.io-kubeguide-guestbook-ph ...
- m74 考试反思
这次不叫考试题解,叫做考试反思,为什么折磨说,因为这次犯的错误太多了! 事情还要从昨天晚上说起,昨晚放学,班主任来机房说我被子不合格,要停课反思 ###&&￥%#%￥@#%￥#@……% ...
- NOIP 模拟22
这次考试真的是像教练说的真的挺难的,但是人家rank1还是100+, 但是咕咕蛊!
- Linux 常用命令 | free 详解
free命令可以显示Linux系统中空闲的.已用的物理内存及swap内存,及被内核使用的buffer.在Linux系统监控的工具中,free命令是最经常使用的命令之一.本文介绍free命令的使用方法和 ...
- Python 基础之socket编程（一）
Python 基础之socket编程(一) 可以进行通信玩儿了,感觉不错不错,网络通信就像打电话,我说一句你听一句之后,你再说一句,我听一句,就这样.....下去了.不扯淡了,来来来,看看今天都搞了点 ...