Arvin Chen 2022-01-09 01:34 采纳率: 100%
浏览 36
已结题

v-model 输入框 输入非法字符 输入框的显示为非法字符不显示绑定的值

电商项目中购买商品输入框中做了逻辑判断输入非法字符不让修改v-model绑定的变量,但是页面还是显示输入的非法字符

              < div class="controls">
                <input autocomplete="off" class="itxt" v-model.lazy="defaultnum">
                <a href="javascript:" class="plus" @click="defaultnumadd">+</a>
                <a href="javascript:" class="mins" @click="defaultnumred">-</a>
              </div>

<script>
data(){
      return{
        num:0
      }
    },
computed:{
 defaultnum:{
      get:function(){
        return this.num
      },
      set:function(newNum){
        if(+newNum??''!==''){
           return this.num=Math.floor(newNum)
        }
        else{
                   return this.num  //这里怎么能做一个刷新之类的操作呢?因为值没变所以他不刷新就会显示非法字符求教!!!!
        }
      }
    }
},
methods:{
   
      defaultnumadd(){
        this.num=+this.num+1 //因为输入的值是字符串所以+this.num转化一下不然就变成拼接了
      },
      defaultnumred(){
        this.num=+this.num-1 
        this.num>=0?this.num:this.num=0

      }
    },
</script>

运行结果及报错内容

如果input输入框 输入一个f 或者其他字母或者非法字符 后 页面就显示这个非法字符 ,我想让他显示我的合法值怎么弄?

我想要达到的结果

让页面显示的和我的绑定值一致

  • 写回答

1条回答 默认 最新

  • 关注

    把this.num 先赋值为别的,再赋值回原来的值就可以了

    computed: {
        defaultnum: {
            get: function() {
                return this.num
            },
            set: function(newNum) {
                if (!isNaN(Math.floor(newNum))) {
                    this.num = Math.floor(newNum)
                } else {
                    let r = this.num;
                    this.num = -1;
                    this.num = r;
                }
            }
        }
    },
    

    如有帮助,请点击我的回答下方的【采纳该答案】按钮帮忙采纳下,谢谢!

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录

报告相同问题?

问题事件

  • 系统已结题 1月17日
  • 已采纳回答 1月9日
  • 创建了问题 1月9日

悬赏问题

  • ¥50 关于多次提交POST数据后,无法获取到POST数据参数的问题
  • ¥15 win10,这种情况怎么办
  • ¥15 如何在配置使用Prettier的VSCode中通过Better Align插件来对齐等式?(相关搜索:格式化)
  • ¥100 在连接内网VPN时,如何同时保持互联网连接
  • ¥15 MATLAB中使用parfor,矩阵Removal的有效索引在parfor循环中受限制
  • ¥20 Win 10 LTSC 1809版本如何无损提升到20H1版本
  • ¥50 win10 LTSC 虚拟键盘不弹出
  • ¥30 微信小程序请求失败,网页能正常带锁访问
  • ¥50 CrossLink-LIF-MD6000 型 FPGA 的 CMOS 转 MIPI D-PHY IP 核功能使用异常
  • ¥15 proteus控制16x16LED点阵显示屏的设计