vue中的number

今天在vue文档中看到有number这样一个修饰符觉得挺方便的就尝试了一下下面是代码<body><div id="box"><input type="number"v-model.number="message" id="test" @change="change()"><div>{{message}}<...

weixin_30398227

2765人浏览 · 2017-08-04 11:52:00

weixin_30398227 · 2017-08-04 11:52:00 发布

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

转载于:https://www.cnblogs.com/yuanzhiguo/p/7284277.html

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^