今天在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. 【概念】SVG(2)

    Style <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg&qu ...

  2. MySQL丨5.6版本插入中文显示问号解决方法

    解决办法: 1.找到安装目录下的my-default.ini 这个配置文件 2.copy一份粘贴到同目录下 另命名为my.ini 3.在my.ini 配置下加上下面几句代码 并保存 [mysql]de ...

  3. v-for指令用法一

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  4. python 特殊方法之new

    object.__new__(cls[, ...]) Called to create a new instance of class cls. __new__() is a static metho ...

  5. 并不对劲的bzoj3677:p3647:[APIO2014]连珠线

    题目大意 有一种生成\(n\)个点的树的方法为: 一开始有一个点,\(n-1\)次操作,每次可以有两种操作:1.选一个点,用一条红边将它与新点连接:2.将新点放在一条红边上,新点与这条红边两端点直接的 ...

  6. Java并发之synchronized

    Java多线程同步关键词是常用的多线程同步手段.它可以修饰静态类方法,实例方法,或代码块.修饰static静态方法时是对整个类加锁. 一.实现原理 在JVM中对象内存分三块区域,对象头.实例数据.对齐 ...

  7. 【Boost】boost库asio详解2——io_service::run函数无任务时退出的问题

    io_service::work类可以使io_service::run函数在没有任务的时候仍然不返回,直至work对象被销毁. void test_asio_nowork() { boost::asi ...

  8. JS获取元素的offsetTop,offsetLeft等相关属性

    1. obj.clientWidth //获取元素的宽度 obj.clientHeight //元素的高度 obj.offsetLeft //元素相对于父元素的left obj.offsetTop / ...

  9. 联想Y450在Ubuntu下调节屏幕亮度

    今天觉得ubuntu下编程时屏幕太亮,上网查了下怎样设置屏幕亮度,按住Fn 的同时调节,结果木有反应啊,杯催.... 继续搜索,最终解决了, happy... 1. 设置屏幕亮度初始值,解决reboo ...

  10. Android开发相关工具（eclipse篇）

    ADT 安装该工具后才能配置Android SDK包,使可以在eclipse里开发Android程序 AVD Android模拟器管理工具,创建删除Android模拟器 SDK Manager And ...