今天在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:"123", }, 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:"123", }, methods:{ change:function () { console.log(typeof this.message) } } }) </script>
果然最后输出的是number