今天在vue文档中看到有number这样一个修饰符

觉得挺方便的就尝试了一下下面是代码

<body>

<div id="box">

<input type="number"  v-model.number="message" id="test" @change="change()">

    <div>{{message}}</div>

</div>

</body>

<script type="text/javascript">

    var test=document.getElementById("test")

    new Vue({

        el:"#box",

        data:{

            message:"",

        },

        methods:{

            change:function () {

                console.log(typeof test.value)

            }

        }

    })

</script>

结果打出出来并不是我想的numer而是string，随即在网上查找了了一下看到很多人有类似的问题，最后我发现这个修饰修改的是并不是input里面的类型，而是和他绑定的data里面的message，接下来再尝试一下

<div id="box">

<input type="number"  v-model.number="message" id="test" @change="change()">

    <div>{{message}}</div>

</div>

</body>

<script type="text/javascript">

    var test=document.getElementById("test")

    new Vue({

        el:"#box",

        data:{

            message:"",

        },

        methods:{

            change:function () {

                console.log(typeof this.message)

            }

        }

    })

</script>

果然最后输出的是number

vue中的number的更多相关文章

  1. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

  2. 理解Vue中的Render渲染函数

    理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...

  3. 动手实现一个vue中的模态对话框组件

    写在前面 对话框是很常用的组件 , 在很多地方都会用到,一般我们可以使用自带的alert来弹出对话框,但是假如是设计 出的图该怎么办呢 ,所以我们需要自己写一个对话框,并且如果有很多地方都用到,那我们 ...

  4. vue中v-text / v-html

    vue中v-text / v-html使用 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  5. vue中如何使用mockjs摸拟接口的各种数据

    mockjs的作用 生成模拟数据 模拟 Ajax 请求,返回模拟数据 基于 HTML 模板生成模拟数据(后续更新) 帮助编写单元测试(后续更新) Vue 中使用 mock 有两种使用方式,一种是仅编写 ...

  6. 如何在vue中使用ts

    注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖 为什么用ts? ...

  7. vue中Axios的封装和API接口的管理

    前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...

  8. vue中的页面渲染方案

    一.模板渲染 <div id="J_render_app"> <ul v-if="items.length"> <li v-for ...

  9. vue中动态加载组件+开发者模式+JS参数值传递和引用传递

    今天写vue里面通过接口反参动态加载组件时候 跟着同学...学习到了 一.先说说vue 内置组件 component 的用法 component组件可以来专门用来进行组件的切换,使用is来绑定你的组件 ...

随机推荐

  1. the art of seo(chapter four)

    SEO Implementation:First Stages ***Development Platform and Information Architecture***1.Technology ...

  2. 卸载asterisk 会装就要会卸载 你会吗? [跟我一起学](转安静的发狂者)

      1 针对用编译的方式安装时的卸载 第一步 :先停止你的asterisk >asterisk -rx ‘stop now’然后要验证一下是否真的被停了. >ps aux|grep “as ...

  3. HihoCoder 1504 : 骑士游历 (矩阵乘法)

    描述 在8x8的国际象棋棋盘上给定一只骑士(俗称“马”)棋子的位置(R, C),小Hi想知道从(R, C)开始移动N步一共有多少种不同的走法. 输入 第一行包含三个整数,N,R和C. 对于40%的数据 ...

  4. 如何判断一个for循环执行完毕

    在外面一个变量a=arr.leng; 然后就是进行for循环, 在for循环下面进行判断,因为如果结束那么i的值就会>=a;if条件成立的话,可以在里面进行循环完毕要做的操作.

  5. MongoDB 复制集节点增加移除及节点属性配置

    复制集(replica Set)或者副本集是MongoDB的核心高可用特性之一,它基于主节点的oplog日志持续传送到辅助节点,并重放得以实现主从节点一致.再结合心跳机制,当感知到主节点不可访问或宕机 ...

  6. JavaScript-Tool：jquery.vaidate.js

    ylbtech-JavaScript-Tool:jquery.vaidate.js 1.返回顶部 1. 2. 3. 2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 0. https ...

  7. dockerfile_nginx+PHP+mongo数据库_完美搭建

      基于dockerfile创建nginx+PHP+mongo数据库_完美搭建     第一步:   从git上:git clone http://git.oursdata.com/wangyue/d ...

  8. URAL 1996 Cipher Message 3

    题目 神题. 记得当初DYF和HZA讲过一个FFT+KMP的题目,一直觉得很神,从来没去做. 没有真正理解FFT的卷积. 首先考虑暴力. 只考虑前7位 KMP 找出所有 B 串可以匹配 A 串的位置. ...

  9. 爬虫中Xpath有时候是无效的

    http://www.cnblogs.com/lchzls/p/6282790.html给出了两种方案

  10. Identity Server 4 原理和实战（完结）_建立Identity Server 4项目，Client Credentials 授权实例

    创建项目 dotnet new -i IdentityServer4.Templates 多出来的这些模板 adminUI用来测试,想要用再生产环境,需要交钱 结合core的 Identity来使用 ...