代码编织梦想

效果

请添加图片描述

问题

@input 事件进行拦截 打印 e.target.value的值变化了,但是页面不重新渲染。
如下例子:
输入 11 e.target.value的值是11
输入11a 正则进行拦截更改 e.target.value的值还是是11
输入11ab 正则进行拦截更改 e.target.value的值还是是11
输入11ab3 正则进行拦截更改 e.target.value的值更改了113
就是因为拦截后的值没变导致页面不重新渲染

解决

  <input
      class="input"
      type="text"
      placeholder="请输入价格"
      :value="pItem.price"
      @input="handleOnlyNumbersInput($event, pItem, 'price')"
    />
    //data中的属性
    nowNum: 0
    //methods中的handleOnlyNumbersInput函数
    methods:{
    // 现在只输入 数字
    handleOnlyNumbersInput(e, item, key) {
      let input = e.target.value;
      const regex = /^[0-9.]*$/; //数字包括小数点
      if (!regex.test(input)) {
        // e.target.value = input.replace(/[^\d.]/g, '');
        input = input.replace(/[^\d.]/g, '');
        this.nowNum++;
        //来回切换更改 input 值 是为了 使得input内容变化从而使页面渲染
        if (this.nowNum % 2 == 0) {
          this.$set(item, key, input + ' ');
        } else {
          this.$set(item, key, ' ' + input);
        }
        if (this.nowNum >= 100000) {
          this.nowNum = 0;
        }
      }
      this.$nextTick(() => {
        this.$set(item, key, input);
        // this.$forceUpdate();
      });
    },
    }
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43245095/article/details/129831022

学习微信小程序的资料汇总---转载自知乎_鲜卑大帝的博客-爱代码爱编程

作者:初雪 链接:https://www.zhihu.com/question/50907897/answer/128494332 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ...

微信小程序资源汇总_vincentzyc的博客-爱代码爱编程

1:微信小程序官方工具:https://mp.weixin.qq.com/debug/w … tml?t=14764346784612:微信小程序简易教程:https://mp.weixin.qq.com/debug

微信小程序学习资料——转载-爱代码爱编程

注:本文转载知乎上的回答 作者:初雪 链接:www.zhihu.com/question/50… 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 微信小程序正式公测,张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存;ctrl+S;

uni-app 使用vue的语法+小程序的标签和API。-爱代码爱编程

  开发规范 为了实现多端兼容,综合考虑编译速度、运行性能等因素,uni-app 约定了如下开发规范: 页面文件遵循 Vue 单文件组件 (SFC) 规范组件标签靠近小程序规范,详见uni-app 组件规范接口能力(JS API)靠近微信小程序规范,但需将前缀 wx 替换为 uni,详见uni-app接口规范数据绑定及事件处理同 Vue.js 规范,

微信小程序基本使用-爱代码爱编程

前言 一直都在使用typora做笔记存本地 内容多了有点卡 现在移到博客来 内容是学习时简单记录 不免有错误的见解 望赐教并见谅哦 小程序的启动过程 下载小程序包---启动小程序---加载解析app.json---注册App() 接下来一边执行App的生命周期 一边根据app.json中pages的配置加载自定义的组件代码 接着按顺序加载解析对

情人节福利,恋爱话术微信小程序它来了(开源,看了就懂~,2万字真香警告)-爱代码爱编程

1、前言 在大家眼中,有没有觉得女神就像冰山美人一样?在聊天中对你是很高冷,或者是忽冷忽热,爱理不理。很多男生面对这个问题都束手无策,或者女神不理你时,又急着发短消息过去了,结果女神根本不理睬你。那怎么办呢? 其实女神也一样,是情绪动物,她的情感由情绪控制着,不会像男人那样理性、讲逻辑。你说服不了她喜欢你,但通过调动她的情绪,你可以让她

微信小程序中聊天室的构建-爱代码爱编程

html书写如下: <!--pages/chatroomDetail/chatroomDetail.wxml--> <view class="bgc"></view> <view wx:if="{{loadingSocket}}"> 聊天室连接中... </view> <!-- 可以

微信小程序 - 使用 uni-app 开发小程序以及部分功能实现-爱代码爱编程

文章目录 一、uni-app1、简介2、开发工具3、新建 uni-app项目4、把项目运行到微信开发者工具二、实现tabBar效果1、创建tabBar页面2、配置tabBar三、配置网络请求1、依照官网提示安装、导入、使用2、实战四、uni-app 里面小程序分包1、创建分包目录2、在 pages.json 文件中配置3、创建分包页面五、公用方法封

微信小程序的兼容处理汇总(不定期更新)_八岐大兔吼啦吼啦的博客-爱代码爱编程

目录 1.名词统一 2.兼容问题的几种情况 3.问题分类 3.1.Api相关 3.1.1.wx.makePhoneCall()拨打电话页面样式不一致 3.1.2.wx.enableAlertBeforeUnload()监听右滑返回上一页询问对话框不弹出 3.2.JS处理相关 3.2.1.ios做new Date()时,时间格式不兼容 3.

微信小程序和uni-app面试高频知识点_qq_53694927的博客-爱代码爱编程

微信小程序 微信小程序的项目结构 前端代码分为结构层html(WXML),表现层css(WXSS),行为层 js,在这之前首先给大家介绍一下小程序里面的一些文件类型及用途: .json 后缀的 JSON 配置文件 .wxml 后缀的 WXML 模板文件 .wxss 后缀的 WXSS 样式文件 .js 后缀的 JS 脚本逻辑文件 根目录  

uniapp实战项目笔记55 自定义tabbar并使用tabbar事件拦截未登录跳转到登录页面-爱代码爱编程

UNIAPP实战项目笔记55 自定义Tabbar并使用Tabbar拦截未登录跳转到登录页面 点击购物车和我的的时候需要拦截并验证登录 通过验证的直接跳转,为通过验证的跳转到登录页面 通过自定义tabbar来实现

uniapp开发微信小程序-爱代码爱编程

uniapp开发微信小程序 微信小程序的开发 https://developers.weixin.qq.com/miniprogram/dev/framework/ 1 注册微信小程序 微信小程序注册: http

uniapp -爱代码爱编程

目录 前言例如:基于 uniapp 开发的微信小程序商城项目 1. 起步1.1 uni-app 简介1.2 开发工具1.2.1 下载 HBuilderX1.2.2 安装 HBuilderX1.2.3

uniapp开发小程序部分功能实现详解_uni.$http-爱代码爱编程

一. 实现tabBar效果 1. 创建tabBar页面         在 pages 下面创建,右键新建页面,这里创建的是 tanBar 对应的几个页面;记住这里要勾选"创建同名目录、在pages.json 中注册"两个选项,默认是选中的;(home、cate、cart、my) 2. 配置tabBar 在pages.json文件中,在pages平

vue uniapp 微信小程序 搜索下拉框 模糊搜索_微信小程序 实现 搜索框搜索 模糊匹配-爱代码爱编程

vue uniapp 微信小程序 搜索下拉框 模糊搜索 话不多说 直接贴代码 template <template> <view class="index"> &l