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来绑定你的组件 ...
随机推荐
- 调试windows服务最简单的方法之一
先看一下这段启动代码: using System; using System.Collections.Generic; using System.Linq; using System.ServiceP ...
- plsql导入cvs 时提示missing right parenthesis
删除自动生成的时间格式值,如:SQL function框里自动生成的值
- C++类定义 常量定义
#include "stdafx.h"#include "iostream" using namespace std; class MyClass{ int _ ...
- 「LuoguP1220」 关路灯（区间dp
题目描述 某一村庄在一条路线上安装了n盏路灯,每盏灯的功率有大有小(即同一段时间内消耗的电量有多有少).老张就住在这条路中间某一路灯旁,他有一项工作就是每天早上天亮时一盏一盏地关掉这些路灯. 为了给村 ...
- Python框架下django 的并发和多线程
django 的并发能力真的是令人担忧,django本身框架下只有一个线程在处理请求,任何一个请求阻塞,就会影响另一个情感求的响应,尤其是涉及到IO操作时,基于框架下开发的视图的响应并没有对应的开启多 ...
- AQS共享锁应用之Semaphore原理
我们调用Semaphore方法时,其实是在间接调用其内部类或AQS方法执行的.Semaphore类结构与ReetrantLock类相似,内部类Sync继承自AQS,然后其子类FairSync和NoFa ...
- MSTAR SERVICE结构
程序结构: 1.主线程的构建 appMain.c/appMain_Create(): 2.主线程服务构建 _appMain_Task() 清空服务: memset(_appMain.appList, ...
- PHP参数类型
class User{ public $name; public $password; function __construct($name,$password){ ...
- Codeforces1107E Vasya and Binary String 记忆化dp
Codeforces1107E 记忆化dp E. Vasya and Binary String Description: Vasya has a string \(s\) of length \(n ...
- CodeForces 761C 【DP】
总结:能这么DP就这么写! 多练位运算标记. #include<bits/stdc++.h> using namespace::std; const int N=55; const int ...