微信小程序实现比较功能的五种方法

首先在index.wxml页面写一个测试页面
如图：

代码如下

接下来就是比较功能的实现
第一种方法
首先在两个input组件中用bindchange方法绑定事件处理函数，在button组件中用bindtap绑定事件函数
如图

接下来在index.js中实现
代码如下

适用于页面中少量input组件的情况
第二种方法
第二种方法为两个input组件绑定相同的函数
通过id和dataset来获取元素
1.通过id获取

代码具体实现如下

2.通过dataset来获取元素

具体代码实现如下

第三种方法
在text组件上直接处理计算逻辑

具体实现代码如下

第四种方法
通过条件渲染的方式比较大小
使用wx:if或者wx:if wx:else实现

或者

第五种方法
通过表单获取input组件的值，比较结果

实现代码如下
最终成功运行如下

微信小程序实现比较功能的五种方法相关推荐

微信小程序如何导入文件的一种方法
微信小程序如何导入文件的一种方法,前三条才是有用的信息 1 环境 2 当你看到好的demo想在自己的小程序试试的时候 3 解决方式,进入本地文件夹直接复制新的改变功能快捷键合理的创建标题,有助于 ...
微信小程序转二维码两种方法
话不多说,直接上干货第一种方法: 首先,你需要在电脑上打开https://mp.weixin.qq.com注册一个个人微信订阅号, 其次,登陆微信电脑版,微信号关注你注册的订阅号,这是重点注册好了 ...
微信小程序使用特殊字体的两种方法
微信小程序中如何使用特殊字体我有两种方法: 1. 转base64格式下载要使用的字体,建议TTF格式打开网站 https://transfonter.org/ 转换格式,得到压缩包将压缩包解压 ...
微信小程序使用和天气图标的一种方法
和天气官方文档上介绍的npm导入后使用<i class="qi-xxx"></i>的方式在微信小程序上并不能使用.网上搜的博客大多也是将icon图标下载到本 ...
微信小程序更新webview页面的三种方法
场景在小程序其它页面做了操作,数据发生改变,回到webview页面时需要更新webview里面的数据.由于小程序没有提供与webview的实时通信能力,因此刷新页面是个可考虑的做法. 方法一最常见 ...
微信小程序使用自定义字体的三种方法
一.loadFontFace接口小程序官方提供的接口,最便捷的加载字体的方法,不过限制颇多.必须https且同源,canvas等原生组件不支持.注意!!使用本地文件无效,必须使用网络地址. 官方文档 ...
微信小程序的不同函数调用的几种方法
一.调取参数直接调取当前js中的方法, 调取参数that.bindViewTap(); 二.跳转页面 navigateTo: function () { wx.navigateTo({ url: ' ...
微信小程序把玩（三十五）Video API
原文:微信小程序把玩(三十五)Video API 电脑端不能测试拍摄功能只能测试选择视频功能,好像只支持mp4格式,值得注意的是成功之后返回的临时文件路径是个列表tempFilePaths而不是tem ...
微信小程序原生开发功能合集一：微信小程序开发介绍
一.专栏介绍本专栏主要内容为微信小程序常用功能开发过程的介绍说明,包括开发微信小程序常用组件的封装.常用功能的开发等,提供源代码.开发过程讲解视频.完整的课程等. 组件封装: 下拉选择组件. ...

微信小程序实现比较功能的五种方法

微信小程序实现比较功能的五种方法相关推荐

最新文章

热门文章