作为一个菜鸟，兼只会依葫芦画瓢的搬砖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之路 -- 软件的开发规范

    一. 软件的开发规范 什么是开发规范?为什么要有开发规范呢? 你现在包括之前写的一些程序,所谓的'项目',都是在一个py文件下完成的,代码量撑死也就几百行,你认为没问题,挺好.但是真正的后端开发的项目 ...

  2. The usage of Markdown---文字强调：加粗/斜体/文本高亮/删除线/下划线/按键效果

    更新时间:2019.09.14 1. 序言 有时候,我们需要对某些文字进行强调,例如粗体和斜体.而Markdown通常可以使用星号*或者下划线_进行文字强调. 2. 加粗 如果想要达到加粗的效果,可以 ...

  3. 第3次作业-MOOC学习笔记：Python网络爬虫与信息提取

    1.注册中国大学MOOC 2.选择北京理工大学嵩天老师的<Python网络爬虫与信息提取>MOOC课程 3.学习完成第0周至第4周的课程内容,并完成各周作业 4.提供图片或网站显示的学习进 ...

  4. Solr导入MongoDB数据

    数据导入方式: 全量导入和增量导入: query 是全量导入时,把你的数据中查到的数据全部导入,deltaImportQuery 和 deltaQuery 是增量导入数据所需要的两个查询语句.delt ...

  5. 使用grep过滤make的输出内容

    make的输出内容其实分为两种,有些是到标准输出,有些是到标准错误,由于标准输出和标准错误默认都是屏幕,所以平时区分不出来, 实际上一般是error和warning信息到标准错误,其余的到标准输出. ...

  6. leetcode系列---atoiFunction C#code

    Function: /// <summary> /// ToInt /// </summary> /// <param name="str">& ...

  7. 关于dt分组、计数、排序的实例

    #region table去重复求和 var query = dt.Rows.Cast<DataRow>() .OrderByDescending(n => n["OPER ...

  8. 基于AOP和Redis实现对接口调用情况的监控及IP限流

    目录 需求描述 概要设计 代码实现 参考资料 需求描述 项目中有许多接口,现在我们需要实现一个功能对接口调用情况进行统计,主要功能如下: 需求一:实现对每个接口,每天的调用次数做记录: 需求二:如果某 ...

  9. node 短信接口的调用

    首先安装一下 短信的sdk 依赖 这里使用的是阿里云的短信SDK,在阿里云官网申请 npm install @alicloud/sms-sdk --save 调用 新建个 message.js /** ...

  10. Linux 编译与交叉编译

    在Linux环境中,所处平台不同,执行文件也就不同,同一执行文件不能在不同平台下使用 如在Ubnutu下 是用gcc编译一个.c文件 gcc main.c -o main.out -o 可以指定输出文 ...