vue中的number
今天在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的更多相关文章
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
- 理解Vue中的Render渲染函数
理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...
- 动手实现一个vue中的模态对话框组件
写在前面 对话框是很常用的组件 , 在很多地方都会用到,一般我们可以使用自带的alert来弹出对话框,但是假如是设计 出的图该怎么办呢 ,所以我们需要自己写一个对话框,并且如果有很多地方都用到,那我们 ...
- vue中v-text / v-html
vue中v-text / v-html使用 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- vue中如何使用mockjs摸拟接口的各种数据
mockjs的作用 生成模拟数据 模拟 Ajax 请求,返回模拟数据 基于 HTML 模板生成模拟数据(后续更新) 帮助编写单元测试(后续更新) Vue 中使用 mock 有两种使用方式,一种是仅编写 ...
- 如何在vue中使用ts
注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖 为什么用ts? ...
- vue中Axios的封装和API接口的管理
前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...
- vue中的页面渲染方案
一.模板渲染 <div id="J_render_app"> <ul v-if="items.length"> <li v-for ...
- vue中动态加载组件+开发者模式+JS参数值传递和引用传递
今天写vue里面通过接口反参动态加载组件时候 跟着同学...学习到了 一.先说说vue 内置组件 component 的用法 component组件可以来专门用来进行组件的切换,使用is来绑定你的组件 ...
随机推荐
- HTML5 Canvas 自定义笔刷
1. [图片] QQ截图20120715095110.png 2. [代码][HTML]代码 <!DOCTYPE html><html lang="en" & ...
- BZOJ 2023 [Usaco2005 Nov]Ant Counting 数蚂蚁：dp【前缀和优化】
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2023 题意: 有n个家族,共m只蚂蚁(n <= 1000, m <= 1000 ...
- php排序方法之选择排序
//选择排序法 $arr = array(3,55,45,2,67,76,6.7,-65,85,4); function selectSort($arr){ for ( $i=0; $i<cou ...
- 杂项：SVN 常用方法
ylbtech-杂项:SVN 1.返回顶部 1. bin obj *.suo*.user *.csproj.user *.o *.lo *.la *.al .libs *.so *.so.[0-9]* ...
- win8安装iis
win8下面安装iis跟win7一样,需要通过启用和关闭windouws功能来安装iis,具体要选哪些项,请看图: 如果要使用wcf服务,你还需要勾选以下项:
- 发送邮件小工具(python)
#!/usr/bin/python # -*- coding:UTF- -*- import sys import smtplib import email.mime.multipart import ...
- 【eclipse插件开发实战】Eclipse插件开发3——OSGi、RCP
Eclipse插件开发实战3--OSGi.RCP 一.OSGi 1. 什么是OSGi框架 OSGi(Open Service Gateway Initiative)框架是运行在JavaVM环境里的服务 ...
- 极客时间_Vue开发实战_06.Vue组件的核心概念(2)：事件
06.Vue组件的核心概念(2):事件 通过emit传递给父组件 我们点击了重置失败,上层的div的click=handleDivClick是接收不到.重置失败的点击的行为的 通常情况下,你不用.st ...
- IE8 以上版本兼容
在html的内如下写法 其中最后一行是永远以最新的IE版本模式来显示网页的. 另外加上Emulate模式 Emulate模式后则更重视 (细心的人会注意到,用IE9去访问带有x-ua-compatib ...
- 剑指offer面试题：输入某二叉树的前序遍历和中序遍历，输出后序遍历
二叉树的先序,中序,后序如何遍历,不在此多说了.直接看题目描述吧(题目摘自九度oj剑指offer面试题6): 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结 ...