vue中的number

最新推荐文章于 2024-08-12 16:53:30 发布

weixin_30398227

最新推荐文章于 2024-08-12 16:53:30 发布

阅读量2.7k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yuanzhiguo/p/7284277.html

版权

今天在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>