今天在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. CyclicBarrier及CountDownLatch的使用

    CountDownLatch位于java.util.concurrent包下,是JDK1.5的并发包下的新特性. 首先根据Oracle的官方文档看看CountDownLatch的定义: A synch ...

  2. js日期的初始化的格式

    js在初始化日期对象时,如果有传入日期.则格式有兼容性问题: //下面的写法在谷歌下没有问题,在火狐和ie下有问题var time = new Date('2014-11-27 00:00:00'); ...

  3. 生产环境下JAVA进程高CPU占用故障排查---temp

    问题描述:生产环境下的某台tomcat7服务器,在刚发布时的时候一切都很正常,在运行一段时间后就出现CPU占用很高的问题,基本上是负载一天比一天高. 问题分析:1,程序属于CPU密集型,和开发沟通过, ...

  4. 2019腾讯广告算法大赛 Rank23

    由于官方审核代码,代码将在2019年6月28号后开源 写在前面 这次腾讯的第三届广告算法大赛,是我第一次参加,取得了初赛与复赛均为23名的成绩,毕竟我只是初打比赛不久的小白.我想在此分享下我的基本解题 ...

  5. py-day17-jquery

    jquery实现案例 案例: 1.点赞 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  6. Ubuntu 16.04使用chrome闪屏

    使用Chrome的时候上端经常出现闪动的情况, 但是速度特别快, 根本无法截图, 感觉特别扎心, 以为自己的电脑出现问题了或者显卡驱动出现问题了, 后来才发现问题, 只需要关闭Chrome的硬件加速就 ...

  7. chrome提示您的连接不是私密连接

    在实验室登陆qq邮箱总是提示连接不是私密,感觉是上级路由器配置的问题,或者是被监控了.反正邮箱也没啥东西,干脆直接删除这个提示.解决方法如下,测试可用. 解决:我想打不开百度网页是因为chrome强制 ...

  8. 第三篇：SpringBoot用JdbcTemplates访问Mysql

    本文介绍springboot通过jdbc访问关系型mysql,通过spring的JdbcTemplate去访问. 准备工作 jdk 1.8 maven 3.0 idea mysql 初始化mysql: ...

  9. Git（一）

    Git概念 Git其实是一种分布式版本控制系统,与CVS,Subversion等集中化的版本控制系统相对.它主要有几个特点: • 速度快 • 简单的设计 • 对非线性开发模式的强力支持(允许上千个并行 ...

  10. Centos Mininal最小安装

    第一步.下载Minimal镜像,http://mirrors.163.com/centos/7/isos/x86_64/ 第二步.安装VMWare,在VMWare上新建一个Centos虚拟机,可以在建 ...