input 绑定动态输入范围

y***@163.com (作者)

动态绑定是可以的但是那样就直接把值修改了 后面就判断不了啦 我是想让他可以修改 值不正确就直接返回正确值在输入框内不变 用v-model后本来的值就变了没办法再还原了 大佬指点指点

2020-06-30 09:27

y***@163.com (作者)

主要就是想判断这个值的输入范围 没有输入 或者输入0 不符合的数值范围就不修改 显示原数值 是这么个想法

2020-06-30 09:42

Sunny寶寶

回复 y***@163.com: 把值修改了你可以再次改回来呀，用 v-model 是很方便的方法。

你先用一个中间变量保存一下原先的值，如果用户输入的值不符合，你就将它改为原先保存的那个值，如果符合，就把它赋值给中间变量保存下来。

2020-06-30 11:24

Sunny寶寶

<template>  

    <view>  

        <input type="text" v-model="value" @blur="blur">  

    </view>  

</template>  



<script>  

    export default {  

        data() {  

            return {  

                value: '',  //绑定的值  

                valueTemp: ''  //中间变量  

            }  

        },  

        methods: {  

            blur() {  

                if (Number(this.value) > 9) {  

                    this.valueTemp = this.value;  

                } else {  

                    this.value = this.valueTemp;  

                }  

            }  

        }  

    }  

</script>

2020-06-30 11:30

y***@163.com (作者)

回复 Sunny寶寶: 数据更新了 视图没又更新怎么办 用$set() 不知道怎么写里面的值 一写就把里面的内容就清空了

2020-06-30 16:25

Sunny寶寶

回复 y***@163.com: 你的 $set() 是怎么写的？

2020-06-30 16:46

y***@163.com (作者)

回复 Sunny寶寶: this.$set(this.listData[index],'pageNumStar',lists[0]);

2020-06-30 16:47

y***@163.com (作者)

因为我页面上是 listData for循环渲染的 v-model 绑定的也是item.pageNumStar 值个字段

2020-06-30 16:48

Sunny寶寶

回复 y***@163.com:

<template>  

    <view>  

        <view v-for="item in list" :key="item.key">  

            {{item.key}}:<input type="text" v-model="item.value" @blur="blur(item)">  

        </view>  

    </view>  

</template>  



<script>  

    export default {  

        data() {  

            return {  

                list: [  

                    {  

                        value: '',  

                        key: 'min',  

                        temp: ''  

                    },  

                    {  

                        value: '',  

                        key: 'max',  

                        temp: ''  

                    }  

                ]  

            };  

        },  

        methods: {  

            blur(item) {  

                if (item.key === 'min') {  

                    if (Number(item.value) > 5) {  

                        this.$set(item, 'value', item.temp);  

                    } else {  

                        item.temp = item.value;  

                    }  

                } else if (item.key === 'max') {  

                    if (Number(item.value) < 5) {  

                        this.$set(item, 'value', item.temp);  

                    } else {  

                        item.temp = item.value;  

                    }  

                }  

            }  

        }  

    }  

</script>

2020-06-30 18:42

Sunny寶寶

回复 y***@163.com: 我这样写是可以的。然后你的代码写得有点复杂，你可以看看我上面贴出来的思路简化一下。

2020-06-30 18:44

Sunny寶寶

回复 y***@163.com: 而且我这里不用 $set 也是生效的。

2020-06-30 18:48

y***@163.com (作者)

回复 Sunny寶寶: 终于上来了 我会到家里用自己的本子官网都上不来 唉头疼 我不知道为什么我设置的不生效 按照你的方案我直接传item 这个我之前没想到 我就是在想传item 后值是怎么修改 就没用item 厉害呀 但是我改了看到控制台item 里面对应的值被修改了 判断也生效了 就是页面上的显示还是判断之前的没改过来

2020-06-30 22:04

y***@163.com (作者)

回复 y***@163.com: 回复 Sunny寶寶: set 和正常赋值都没用效果 值是改掉的 页面显示不是改掉的值 @blur 有什么其他要注意的地方 还是失去焦点了页面是渲染不出来 忘了 我是用的input直接显示和修改的是和这个关系吗 是因为在input里面直接显示 失去焦点后显示不出来的原因吗

2020-06-30 22:08

y***@163.com (作者)

回复 Sunny寶寶: 我自己写了改简单的Demo测试了下 你的方法没有问题 那可能是我代码哪里有冲突了 我得仔细找找了 谢谢你啦 太厉害了 超级赞!!!

2020-06-30 22:22

y***@163.com (作者)

回复 Sunny寶寶: 问题找到了 数据如果直接写在data里面是没有问题的 可以直接进行修改 如果数据是后台请求过来在页面加载的时候渲染上去的就有问题 失去焦点后数据不会根据判断变更这个要怎么解决 简单说一下吧就是数据是写死在本地的是有效的 从后台获取过来 因为在data里面定义的一个空数组 加载的时候替换进去的数据就不生效

2020-07-01 08:59

Sunny寶寶

回复 y***@163.com:

你说得对，我是在 blur 的时候监听修改，而你在 input 的时候监听修改，这是有区别的。因为你在输入的时候，触发 input 事件，但是此时页面还未渲染完成而你就又要对输入框的值重新赋值，新的赋值的渲染就不生效。只需要加个 $nextTick 即可解决。

我以下代码模拟后台返回数据的形式（延时给 list 赋值），可以参考下：

<template>  

    <view>  

        <view v-for="item in list" :key="item.key">  

            {{item.key}}:<input type="text" v-model="item.value" @input="input($event, item)">  

        </view>  

    </view>  

</template>  



<script>  

    export default {  

        data() {  

            return {  

                list: []  

            };  

        },  

        onLoad() {  

            setTimeout(() => {  

                this.list = [{  

                    value: '',  

                    key: 'min',  

                    temp: ''  

                },  

                {  

                    value: '',  

                    key: 'max',  

                    temp: ''  

                }];  

            }, 2000);  

        },  

        methods: {  

            input(e, item) {  

                let value = e.detail.value;  

                this.$nextTick(() => {  //等待渲染完成  

                    if (item.key === 'min') {  

                        if (Number(value) > 5) {  

                            this.$set(item, 'value', item.temp);  

                        } else {  

                            item.temp = value;  

                        }  

                    } else if (item.key === 'max') {  

                        if (Number(value) < 5) {  

                            this.$set(item, 'value', item.temp);  

                        } else {  

                            item.temp = value;  

                        }  

                    }  

                });  

            }  

        }  

    }  

</script>

2020-07-01 10:50