作为一个菜鸟，兼只会依葫芦画瓢的搬砖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. php下载文件,线上文件下载

    1.多个文件下载 <?php /* 把知道的图片问题名字做成一个数组 */ $mp4 = ['123','456']; /* count($mp4) 类似于 js 的 $mp4.length * ...

  2. Jedis运用scan删除正则匹配的key

    jedis运用scan删除正则匹配的key  我们都知道用keys *进行查询key的时候会进行堵塞,导致redis整体不可用,而使用scan命令则不会.   RedisServiceImpl中sca ...

  3. MyBatis（4）-- 动态SQL

    如果使用JDBC或者类似于Hibernate的其他框架,很多时候要根据需要去拼装SQL,这是一个麻烦的事情.因为某些查询需要许多条件.通常使用其他框架需要大量的Java代码进行判断,可读性比较差,而M ...

  4. 基于 HTML5 + Canvas 实现的楼宇自控系统

    前言 楼宇自控是指楼宇中电力设备,如电梯.水泵.风机.空调等,其主要工作性质是强电驱动.通常这些设备是开放性的工作状态,也就是说没有形成一个闭环回路.只要接通电源,设备就在工作,至于工作状态.进程.能 ...

  5. CentOS7.5模板机配置

    CentOS7.5模板机配置 标签(空格分隔): linux学习知识整理 Mr.Wei's notes! 人一定要有梦想,没有梦想那根咸鱼有什么区别: 即便自己成为了一条咸鱼,也要成为咸鱼里最咸的那一 ...

  6. weex不支持类的动态追加

    做一个weex项目时遇到需要根据状态动态改变样式的功能,本来想通过判断属性追加类的方式实现,如下: :class="['long-news',{'bold-txt':noRead}]&quo ...

  7. 安装Java环境

    一．下载JDK https://www.oracle.com/technetwork/java/javase/downloads/index.html 二．exe安装 默认路径 C:\Program ...

  8. C/C++ return *this和return this的区别

    首先我们知道~ class Test { public: Test() { return this; //返回的当前对象的地址 } Test&() { return *this; //返回的是 ...

  9. 说说Java中你不知道switch关键字

    Switch语法 switch作为Java内置关键字,却在项目中真正使用的比较少.关于switch,还是有那么一些奥秘的. 要什么switch,我有if-else 确实,项目中使用switch比较少的 ...

  10. 单点登录 - OAuth 2.0 授权码模式（一）

    OAuth 2.0定义了四种授权方式 授权码模式(authorization code) 简化模式(implicit) 密码模式(resource owner password credentials ...