vue 限制 input 输入大小怎么做

kaipizhe
  • 1.2k

有几个问题,
第一:怎么控制输入的只能是整数;
第二:怎么控制最大不能超过 max 的值,最少不能小于 1

<template>
<div>
    <div id="list">
        <input v-for="(item, index) in list" v-model="item.number" @change="_ceshi" />
    </div>
</div>
</template>

<script>
export default {
    name: "Test",
    data() {
        return {
            list:[
                {
                    id:1,
                    name:"a",
                    number:1,
                    max:23
                },
                {
                    id:2,
                    name:"b",
                    number:1,
                    max:234
                },
                {
                    id:3,
                    name:"c",
                    number:1,
                    max:2
                },
            ]

        }
    },
    methods: {
        _ceshi() {
            console.log(JSON.stringify(this.list))
        }
    },
    mounted() {

    }
}
</script>

<style scoped>

</style>
回复
阅读 128
2 个回答
✓ 已被采纳
  _ceshi(item, e) {
            let inputNumber = e.target.value
            if (/^\d+$/.test(inputNumber)) {
                if (inputNumber >= 1 && inputNumber <= item.max) {
                    console.log(inputNumber)
                    console.log(item.max)
                } else {
                    console.log('超过了最大值' + item.max)
                }
            } else {
                console.log('不是整数')
            }
        }
<div id="list">
   <input v-for="(item, index) in list" v-model="item.number" @input="_ceshi(item,$event)" />
</div>

这个网上应该有很多答案吧!
1 => 找个正则匹配一下
2 => 如果没有固定的业务需求,也可以用 input max和min

你知道吗?

宣传栏