vue中的number

Posted ABC袁

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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

 

以上是关于vue中的number的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段1——vue主模板

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段(vue主模板)

vue中的组件

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置