yumingyang0212@163.com
yumingyang0212@163.com
  • 发布:2020-06-28 14:03
  • 更新:2020-06-30 16:24
  • 阅读:81

input 绑定动态输入范围

分类:uni-app

问题是这样的 我绑定了数据值

  1. 我想判断输入的数值是不是范围内怎么进行控制 不在范围内把原数值给返回去 ,
  2. 并且我还能进行二次修改 不是修改一次就不能修改了 这个要怎么解决 感觉单一的判断不能解决问题
  3. 我现在就是改了数据 然后判断的范围就也跟着变了 再改就改不了

拜求大佬 !

2020-06-28 14:03 负责人:无 分享
已邀请:
Sunny寶寶

Sunny寶寶 - 90後

在 input 上用 v-model 双向绑定来修改值。

  • yumingyang0212@163.com (作者)

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

    2020-06-30 09:27

  • yumingyang0212@163.com (作者)

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

    2020-06-30 09:42

  • Sunny寶寶

    回复 yumingyang0212@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

  • yumingyang0212@163.com (作者)

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

    2020-06-30 16:25

  • Sunny寶寶

    回复 yumingyang0212@163.com: 你的 $set() 是怎么写的?

    2020-06-30 16:46

  • yumingyang0212@163.com (作者)

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

    2020-06-30 16:47

  • yumingyang0212@163.com (作者)

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

    2020-06-30 16:48

  • Sunny寶寶

    回复 yumingyang0212@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寶寶

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

    2020-06-30 18:44

  • Sunny寶寶

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

    2020-06-30 18:48

  • yumingyang0212@163.com (作者)

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

    2020-06-30 22:04

  • yumingyang0212@163.com (作者)

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

    2020-06-30 22:08

  • yumingyang0212@163.com (作者)

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

    2020-06-30 22:22

  • yumingyang0212@163.com (作者)

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

    6 天前

  • Sunny寶寶

    回复 yumingyang0212@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>

    6 天前

yumingyang0212@163.com

yumingyang0212@163.com (作者)

数据根更新了视图没更新

要回复问题请先登录注册