Vue.js绑定里的number为什么不起作用呢

问题描述

问 题

Vue官方教程里关于此部分的说明
http://cn.vuejs.org/guide/forms.html#number

如果想自动将用户的输入保持为数字，可以添加一个特性 number：

<input v-model="age" number>

我的测试代码

<div id="example2">
    <input v-model="message" number>
    <span>{{message}}</span>
</div>

var vm2 = new Vue({
            el:"#example2",
            data:{
                message:''
            }
    })

是我理解有误吗还是...为何还是能输入字母呢?

解决方案

这里的 number 指令并不是限制用户输入，而是将用户输入的数据尝试绑定为 js 中的 number 类型

举个例子，如果用户输入300，data 中绑定的其实是'300'(string)，添加 number 指令后可以得到 300(number)的绑定结果。
而如果用户输入的不是数字，这个指令并不会产生任何效果。

这篇关于Vue.js绑定里的number为什么不起作用呢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！