今天在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. collectd+logstash+influxdb+grafana构建windows服务器应用监控系统

    一.背景介绍 本监控方案支持对Windows Server服务器集群的全面监控,方案提供丰富的图表展示, 以及对异常问题进行邮件的实时报警. 本系统由Collectd(操作系统数据搜集).logsta ...

  2. map的详细用法 (转

    map的详细用法: map是STL的一个关联容器,它提供一对一(其中第一个可以称为关键字,每个关键字只能在map中出现一次,第二个可能称为该关键字的值)的数据处理能 力,由于这个特性,它完成有可能在我 ...

  3. mongodb给我们提供了fsync+lock机制把数据暴力的刷到硬盘上

    能不能把数据暴力的刷到硬盘上,当然是可以的,mongodb给我们提供了fsync+lock机制就能满足我们提的需求. fsync+lock首先会把缓冲区数据暴力刷入硬盘,然后给数据库一个写入锁,其他实 ...

  4. apache web 服务器

    0. 特性与特点 性能方面,apache 在设计时采用了以"进程"为基础的结构,自然进程比线程消耗了更多的系统开销,导致了 apache 在多处理器环境中性能有所下降: 因此,在对 ...

  5. [FJOI 2016] 神秘数

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=4408 [算法] 首先考虑一组询问怎样做 : 将数组按升序排序 , 假设我们现在可以表 ...

  6. gulp --- 前端自动化构建工具

    目录 1. gulp使用步骤 1.1 安装Node.js 1.2 全局安装gulp 1.3 安装项目依赖包gulp 1.3.1 了解package.json 1.3.2 根据package.json安 ...

  7. 24.如何结束返回值是void的方法

    如何结束返回值是void的方法? return;只能够出现在方法类型是void 的方法中,用来结束方法. return后面还可以跟数据,后面的数据可以是整数.字符串.false.ture.小数.主要看 ...

  8. Firebug 的脚本页面不能用

    1.遇到这种情况,一般重置firebug,然后开启“脚本“功能,刷新页面,就能显示正常 2.要不就是 版本问题,50.0不行,下载回49版本就可以了

  9. 20个Flutter实例视频教程-第05节: 酷炫的路由动画-1

    视屏地址: https://www.bilibili.com/video/av39709290/?p=5 博客地址: https://jspang.com/post/flutterDemo.html# ...

  10. 转载 关于启用HTTPS的一些经验分享

    本文转载自  https://imququ.com/post/sth-about-switch-to-https.html 随着国内网络环境的持续恶化,各种篡改和劫持层出不穷,越来越多的网站选择了全站 ...