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来绑定你的组件 ...
随机推荐
- Java笔记（五）
泛型:JDK1.5版本后出现的新特性.用于解决安全问题,是一个类型安全机制. 好处:将运行期间出现问题ClassCastException,转移到了编译时期.方便程序员解决问题,让运行时问题减少. 避 ...
- Intellij IDEA 弹窗License activation 报 this license BIG3CLIK6F has been cancelled 错误的解决。
this license BIG3CLIK6F has been cancelled 具体如下: 对,没错,这个激活码本来可以使用到2018年的,但是,忽然间就不能用了.经查询吧. 还得修改个系统配置 ...
- Azure REST API (5) 中国Azure EA Portal Billing API
<Windows Azure Platform 系列文章目录> 本文介绍的是国内由世纪互联运维的Azure China. EA Portal的管理url是:https://ea.azure ...
- 基于IOS下的支付宝SDK的学习与使用——实现产品支付（二）
首先本篇为作者原创,仅供学习使用,以后会不断完善,精炼.阅读之前请参考 上一篇 上一篇 中详细说明了结合官方支付宝SDK,对工程环境进行的一些配置,实现了支付,本篇重点说明一下,注意事项和原理,主要 ...
- [转]git merge 跟 git merge -no-ff
根据这张图片可以看出 git merge –no-ff 可以保存你之前的分支历史.能够更好的查看 merge历史,以及branch 状态. git merge 则不会显示 feature,只保留单条分 ...
- NodeJS REST API with MySQL and Express
http://www.nodewiz.biz/nodejs-rest-api-with-mysql-and-express/ NPM Modules Express felixge/node-mysq ...
- no more URLs to fetch
Generator: records selected for fetching, exiting ... Stopping at depth= - no more URLs to fetch. 出现 ...
- 【网络爬虫】【python】网络爬虫（四）：scrapy爬虫框架（架构、win/linux安装、文件结构）
scrapy框架的学习,目前个人觉得比较详尽的资料主要有两个: 1.官方教程文档.scrapy的github wiki: 2.一个很好的scrapy中文文档:http://scrapy-chs.rea ...
- Flutter实战视频-移动电商-13.首页_广告Banner组件制作
13.首页_广告Banner组件制作 主要是做这个小广告条. 其实就是读取一个图片做一个widget放到这里 使用stlessW快速生成 定义一个变量存放图片的url地址: 这样我们的广告条就写完了 ...
- Java简单的数组用法尝试，和C语言很不一样
public class Main { static int ARRY_LONGTH=100; static int[] getRandomArr(int n){ int[] randomArr; r ...