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来绑定你的组件 ...
随机推荐
- socket.io emit 常见用法
io.on('connect', onConnect); function onConnect(socket){ // 只发给sender. sending to the client socket. ...
- C++中map容器的说明和使用技巧
C++中map容器提供一个键值对容器,map与multimap差别仅仅在于multiple允许一个键对应多个值. 一.map的说明 1 头文件 #include <map> 2 定义 ma ...
- Function javascript
通常而言,一个函数是一个子程序,他们可以被外部代码调用(亦或被滴管函数在内部调用).和程序一样,函数是由一系列声明(被称为函数体function body)组合而成.值可以传递给函数,并且函数可以返回 ...
- hdu-5003 Osu!(水题)
题目链接: Osu! time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Prob ...
- RQNOJ魔法石之恋
魔法石之恋 (stone.pas/c/cpp) [问题描述] 在<Harry Potter and the Sorcerer's Stone>中,想得到魔法石,必须要通过许许多多的测试和游 ...
- No result defined for action cn.crm.action.LinkManAction and result input
这是struts2的一个拦截器报的错误,当你的form中的数据有问题,比如说<input type="text" name="receiverLoginID&quo ...
- su命令，sudo命令，visudo命令
一.命令su 语法 : su [-] username后面可以跟 ‘-‘ 也可以不跟,普通用户su不加username时就是切换到root用户,当然root用户同样可以su到普通用户. ‘-‘ 这个字 ...
- final/finalize/finally的区别
一.性质不同 (1)final为关键字: (2)finalize()为方法:---垃圾回收机制中的方法(GC) (3)finally为为区块标志,用于try语句中: 二.作用 (1)final为用于标 ...
- eclipse项目从编程到打jar包到编写BashShell执行
eclipse项目从编程到打jar包到编写BashShell执行 一.创建Java项目,并编写项目(带额外jar包) 二.打jar包 三.编写BashShell执行 其中一以及二可以参考我的博客 Ec ...
- 2 pyspark学习----基本操作
1 spark的python环境部署可以参照上面一篇哟.http://www.cnblogs.com/lanjianhappy/p/8705974.html 2 pyspark的基本操作. # cod ...