最近在学习vue记录下踩坑过程:
vue官方文档中对于v-model中.number的描述:
.number
如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符:
<input v-model.number="age" type="number">
这通常很有用,因为即使在 type="number" 时,HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析,则会返回原始的值。
失败例子(求哪位好心大哥指正错误):
<div id="app">
<!--这里返回的值是字符串-->
<input id="model1" v-model="age1" type="number"><br>
<!--用了.number将返回的字符串转成数字-->
<input id="model2" v-model.number="age2" type="number">
<button @click="showType">验证</button>
</div>
<script src="../../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
age1: '',
age2: ''
},
methods: {
showType: function (){
var x1 = document.getElementById("model1");
alert("x1 type:"+typeof (x1));
var x2 = document.getElementById("model2");
alert("x2 type:"+typeof (x2))
}
}
})
</script>
输出都是object…
下面是在overstack上找的例子:
<div id="app">
<input type="text" v-model.number="age">
<pre>
{{ $data }}
</pre>
</div>
<script src="../../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data() {
return {
age: ''
}
}
})
</script>
前几天遇到的问题,定于vue的全局组件的时候,定义的组件要写在创建vue实例对象之前,不然不生效(暂时还不知道为啥)。。。