今天在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. 避免复杂的layout

    layout是浏览器计算元素的几何信息:元素在页面上的的大小和位置. 每个元素都有明确的亦或含蓄的大小信息,这些信息基于我们使用的css以及元素的内容被高和父亲元素. 这个过程在 Chrome, Op ...

  2. python中类的定义方法

    # coding =utf-8 ## 类的定义 ##-------------------------------------------------- class Employee: empCoun ...

  3. python中字符串的内置方法

    这里说的是字符串中的内置方法,毕竟字符串是最常用的操作对象. ['__add__', '__class__', '__contains__', '__delattr__', '__doc__', '_ ...

  4. 「LuoguP2420」 让我们异或吧（树上前缀和

    P2420 让我们异或吧-洛谷 题目描述 异或是一种神奇的运算,大部分人把它总结成不进位加法. 在生活中…xor运算也很常见.比如,对于一个问题的回答,是为1,否为0.那么: (A是否是男生 )xor ...

  5. C++之输入输出流和文件传输流

    1.流的控制 iomanip          在使用格式化I/O时应包含此头文件.    stdiostream   用于混合使用C和C + +的I/O机制时,例如想将C程序转变为C++程序 2.类 ...

  6. 洛谷P1967货车运输——倍增LCA

    题目:https://www.luogu.org/problemnew/show/P1967 就是倍增LCA的裸题,注意一些细节即可. 代码如下: #include<iostream> # ...

  7. python读文件和写文件

    f=open('D:\\wangdongjie\\files\\webservice\\baidu\\3.txt','r+') f.write('中国电视台1][][23qwe12f我是一个小小的石头 ...

  8. GetModuleFileNameW

    GetModuleFileNameW( HMODULE hModule, //模块句柄 或应用程序的实例句柄 若参数为NULL,则返回该应用程序全路径 __out_ecount(nSize) LPWS ...

  9. 下载android sdk

  10. opencv MatExpr MatOp

    opencv提供了很多Mat的操作,其中涉及到两个重要的类:MatOp和MatExpr C++: MatExpr abs(const Mat& m) C++: void absdiff(Inp ...