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来绑定你的组件 ...
随机推荐
- TestNG测试用例编写和执行
编写TestNG用例测试基本上包括以下步骤: 编写业务逻辑 针对业务逻辑中涉及的方法编写测试类,在代码中插入TestNG的注解 直接执行测试类或者添加一个testng.xml文件 运行 TestNG. ...
- spark uniq 本质上就是单词计数
粗体部分示例: # dns_domain_info_list_rdd ==> [(src_ip, domain, domain_ip, timestamp, metadataid), ....] ...
- 机器学习： Linear Discriminant Analysis 线性判别分析
Linear discriminant analysis (LDA) 线性判别分析也是机器学习中常用的一种降维算法,与 PCA 相比, LDA 是属于supervised 的一种降维算法.PCA考虑的 ...
- Java中的final和static
final final可以用在类.方法.变量上. 1.final用在类上,表明当前类它不能被继承,没有子类. 2.final用在方法上,表明当前方法不能被override,不能被重写. 3.final ...
- Android-Styles and Themes [From API Guide]
This blog was opened 5 months ago and it has 57 posts now,but the poor thing is by now no one has co ...
- 洛谷P1462通往奥格瑞玛的道路——二分答案最短路
题目:https://www.luogu.org/problemnew/show/P1462 最大值最小问题,二分答案. 代码如下: #include<iostream> #include ...
- python optparse模块的简单用法
# coding = utf-8 from optparse import OptionParser from optparse import OptionGroup usage = 'Usage: ...
- Spring 注释标签@Resource @Autowired 和@Inject的区别
一些spring的开发人员在使用这三个标签进行注入的时候感到困惑.我来尝试解释一下这三个注解的主要区别.事实上,这三者非常相似,只存在一些微小的差别.在稍后的文章中会进行解释. @Resource-在 ...
- MVC中为自动生成实体类添加验证
将额外的基于特性的元数据(象验证特性)施加到由VS设计器自动生成/维护的类的一个方法是,采用一个我们称之为“伙伴类(buddy classes)”的技术. 基本上来说,你创建另外一个类,包含你的验证特 ...
- Flutter实战视频-移动电商-57.购物车_在Model中增加选中字段
57.购物车_在Model中增加选中字段 先修改model类 model/cartInfo.dart类增加是否选中的属性 修改provide 修改UI部分pages/cart_page/cart_it ...