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:"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

 

posted @ 2017-08-04 11:52  ABC袁  阅读(2883)  评论(0)  编辑  收藏  举报