作为一个菜鸟，兼只会依葫芦画瓢的搬砖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. 在Python中,输出格式:%d , %6d , %-6d, %06d , %.6f的一些区分

    和C/C++编程语言一样 %d 普通的整数输出 i = 1 sum = 0 while i <= 100: sum += i i += 1 print("1到100的和为:%d&quo ...

  2. 在元素上写事件和addEventListent()的区别

    在元素上写事件和addEventListent()的区别1. onclick添加事件不能绑定多个事件,后面绑定的会覆盖前面的.而addEventListener能添加多个事件绑定,按顺序执行.2. a ...

  3. XML利用接口显示并导入到数据库

    //控制器代码 /// <summary> /// 页面 /// </summary> /// <returns></returns> public A ...

  4. mac本地安装单机hadoop--学习笔记

    Mac配置hadoop1.修改 /etc/hosts127.0.0.1 localhost2.下载hadoop2.9.0和jdk并安装配置相应环境 vim /etc/profile export HA ...

  5. Java多线程编程（一）Java多线程技能

    一.进程和多线程的概念以及线程的优点 打开Windo任务管理器可以看到很多正在运行着的exe程序,完全可以将运行在内存中的exe文件理解成进程,进程是受操作系统管理的基本运行单元. 线程可以理解成在进 ...

  6. Redis（十二）flush误操作、Redis安全、处理bigkey和寻找热点key

    一.flushall/flushdb误操作的处理 假设进行flush操作的Redis是一对主从结构的主节点,其中键值对的个数是100万,每秒写入量是1000. 1.缓存与存储 被误操作flush后,根 ...

  7. Spring为IOC容器注入Bean的五种方式

    一 @Import导入组件,id默认是组件的全类名 //类中组件统一设置.满足当前条件,这个类中配置的所有bean注册才能生效: @Conditional({WindowsCondition.clas ...

  8. Linux杂谈：解决配置静态ip后eth0网卡启动不了的问题

    今天在看imooc上的<Linux网络管理>的课程中,在做一些实验时修改了下网络配置,发现了一些问题,就是保存网络配置后eth0网卡打不开,可能也会有很多人出现这类问题,我就在这里分享下自 ...

  9. 学习笔记69_Logistic回归

    Logistic回归(逻辑回归)进行分类的主要思想:根据现有数据对分类边界线建立回归公式,以此进行分类. 知乎上的简述: 该算法可根据已知的一系列因变量估计离散数值(比方说二进制数值 0 或 1 ,是 ...

  10. 在线热备份数据库之innobackupex 增量备份InnoDB

    在线热备份数据库之innobackupex 增量备份InnoDB 什么是增量备份?其原理是什么? 增量备份是基于上一次备份后对新增加的内容进行备份,优点相较于完整备份而言备份内容少时间短,能够节省磁盘 ...