作为一个菜鸟，兼只会依葫芦画瓢的搬砖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. 别再让你的微服务裸奔了，基于 Spring Session & Spring Security 微服务权限控制

    微服务架构 网关:路由用户请求到指定服务,转发前端 Cookie 中包含的 Session 信息: 用户服务:用户登录认证(Authentication),用户授权(Authority),用户管理(R ...

  2. Redis（十四）Redis 在Java Web 中的应用

    在传统的 Java Web 项目中,使用数据库进行存储数据,但是有一些致命的弊端,这些弊端主要来自于性能方面. 由于数据库持久化数据主要是面向磁盘,而磁盘的读/写比较慢,在一般管理系统中,由于不存在高 ...

  3. 设计模式（九）Bridge模式

    Bridge模式就是将类的功能层次结构和类的实现层次结构连接起来. 类的功能层次结构就是根据实际非抽象类来说的,也就是父类具有基本功能,然后在子类中增加新功能.用于增加新功能. 类的实现层次结构就是根 ...

  4. linux文本编辑器教学

    linux常见服务 一. 文本编辑器 vi vim是vi增强版 vim需要安装 sudo apt-get -y install vim 1 vim的三种工作模式 1 编辑模式 命令模式=>编辑模 ...

  5. 《Effective Java》 读书笔记（二） 在构造参数过多的时候优先考虑使用构造器

    刚开始看见这个标题的时候,我想到了python可以选择初始化参数的语法,C++.C#能有默认参数. 为什么Java什么都没有~~ 好吧,我们是使用构造器来实现它. 1.当一个类的构造函数需要很多构造函 ...

  6. Unity3-各个内置面板，对象说明

    *在Inspector面板中,是表示每个物体(诸如摄像机,圆柱,正方体)的组件. 组件包含: 1.Transform,在第一节当中,可以用于变换物体的位置.每个物体对象都有. 2.cube,网格,对于 ...

  7. 一道国外前端面试题引发的Coding...

    刚刚看到CSDN微信公众号一篇文章,关于国外程序员面试前端遇到的一道测试题,有点意思,遂写了下代码,并记录一下~ 题目是这样的: ['Tokyo', 'London', 'Rome', 'Donlon ...

  8. Uva 227-Puzzle 解题报告

    题目链接:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  9. Requests库使用总结

    概述 Requests是python中一个很Pythonic的HTTP库,用于构建HTTP请求与解析响应 Requests开发哲学 Beautiful is better than ugly.(美丽优 ...

  10. hashMapp

    原文链接:https://www.iteye.com/topic/539465 Hashmap是一种非常常用的.应用广泛的数据类型,最近研究到相关的内容,就正好复习一下.网上关于hashmap的文章很 ...