作为一个菜鸟，兼只会依葫芦画瓢的搬砖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. 详解Java Web项目启动执行顺序

    一. web.xml加载过程(步骤): 启动web项目,容器(如Tomcat.Apache)会去读取它的配置文件web.xml 中的两个节点,context-param和listener. 紧接着,容 ...

  2. 5分钟彻底理解Redis持久化

    Redis持久化 RDB快照 在默认情况下,Redis将内存数据库快照保存到dump.rdb的二进制文件中. 可以对Redis进行设置,让它在"N秒内数据集至少有N个改动", 这一 ...

  3. 死磕 java线程系列之线程池深入解析——生命周期

    (手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本. 注:线程池源码部分如无特殊说明均指ThreadPoolExecutor类. 简介 上一章我们一起重温了下线程的 ...

  4. js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的区别

    js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的属性汇总,测试浏览器:ie7~ie11.chrome 和 firefox ...

  5. 关于while和do while 的个人理解

    先上代码 int x=425; System.out.println("循环开始,我的初始值为:x="+x); //425 do { System.out.println(&quo ...

  6. qt 计时器自动刷新图片

    计时器 QTimer *timer; timer->start (); void PictureShow::stopStartPage() { if (timer->isActive()) ...

  7. JDK1.8 新特性详解

    一  引言 现在java 10都已经出来了,而自己对java 8的一些新特性都不了解,很是惭愧,而且许多面试都有问到java8的新特性,借此博客好好学习这些新特性 二  新特性 1 default关键 ...

  8. Redis（十三）Python客户端redis-py

    一.安装redis-py的方法 使用pip install安装redis-py C:\Users\BigJun>pip3 install redis Collecting redis Downl ...

  9. Andriod一段时间未操作页面，系统自动登出

    功能描述: APP在公共的设备上运行,出于安全考虑,当登录的用户在超过一定时间内没有做任何操作, 则系统自动登出,用户如需重新操作APP,则需要重新登录 . 第一步:创建一个BaseActivity ...

  10. swiper轮播

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...