编程 Javascript

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

Posted in Javascript onMarch 07, 2020

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

如图：

代码如下

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

接下来就是比较功能的实现

第一种方法

首先在两个input组件中用bindchange方法绑定事件处理函数，在button组件中用bindtap绑定事件函数

如图

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

接下来在index.js中实现

代码如下

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

适用于页面中少量input组件的情况

第二种方法

第二种方法为两个input组件绑定相同的函数

通过id和dataset来获取元素

1.通过id获取

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

代码具体实现如下

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

2.通过dataset来获取元素

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

具体代码实现如下

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

第三种方法

在text组件上直接处理计算逻辑

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

具体实现代码如下

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

第四种方法

通过条件渲染的方式比较大小

使用wx:if或者wx:if wx:else实现

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

或者

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

第五种方法

通过表单获取input组件的值，比较结果

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

实现代码如下

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

最终成功运行如下

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

总结

到此这篇关于微信小程序实现比较功能的方法汇总(五种方法)的文章就介绍到这了,更多相关微信小程序比较内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

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

- Author -

LeslieChen2

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js中widow.open()方法使用详解

Jul 30 Javascript

JS操作iframe里的dom(实例讲解)

Jan 29 Javascript

JS对文本框值的判断示例

Mar 10 Javascript

textarea焦点的用法实现获取焦点清空失去焦点提示效果

May 19 Javascript

在线所见即所得HTML编辑器的实现原理浅析

Apr 25 Javascript

解决jquery实现的radio重新选中的问题

Jul 03 Javascript

输入法的回车与消息发送快捷键回车的冲突解决方法

Aug 09 Javascript

Vue.js组件tree实现省市多级联动

Dec 02 Javascript

JS实现的模仿QQ头像资料卡显示与隐藏效果

Apr 07 Javascript

webstorm和.vue中es6语法报错的解决方法

May 08 Javascript

vue生命周期和react生命周期对比【推荐】

Sep 19 Javascript

小程序云开发初探(小结)

Oct 24 Javascript

微信小程序实现下滑到底部自动翻页功能

Mar 07 #Javascript

js实现选项卡效果

Mar 07 #Javascript

基于JS正则表达式实现模板数据动态渲染(实现思路详解)

Mar 07 #Javascript

js实现简单放大镜效果

Mar 07 #Javascript

js实现文字头像的生成代码

Mar 07 #Javascript

JavaScript队列结构Queue实现过程解析

Mar 07 #Javascript

原生JS实现萤火虫效果

Mar 07 #Javascript

You might like

详解WordPress中用于更新和获取用户选项数据的PHP函数

2016/03/08 PHP

搜索附近的人PHP实现代码

2018/02/11 PHP

javascript 函数速查表

2010/02/07 Javascript

Jquery Uploadify多文件上传带进度条且传递自己的参数

2013/08/28 Javascript

Javascript表格翻页效果的具体实现

2013/10/05 Javascript

jQuery表单域属性过滤器用法分析

2015/02/10 Javascript

js实时获取并显示当前时间的方法

2015/07/31 Javascript

javascript鼠标右键菜单自定义效果

2020/12/08 Javascript

EasyUI学习之DataGird分页显示数据

2016/12/29 Javascript

Bootstrap表单制作代码

2017/03/17 Javascript

jQuery制作input提示内容（兼容IE8以上）

2017/07/05 jQuery

Angular实现可删除并计算总金额的购物车功能示例

2017/12/26 Javascript

Vue实现手机扫描二维码预览页面效果

2020/05/28 Javascript

JS箭头函数和常规函数之间的区别实例分析【 5 个区别】

2020/05/27 Javascript

解决vue页面刷新，数据丢失的问题

2020/11/24 Vue.js

javascript 数组(list)添加/删除的实现

2020/12/17 Javascript

[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3

2018/06/04 DOTA

Python实现测试磁盘性能的方法

2015/03/12 Python

最基础的Python的socket编程入门教程

2015/04/23 Python

python使用PIL缩放网络图片并保存的方法

2015/04/24 Python

python版opencv摄像头人脸实时检测方法

2018/08/03 Python

Python TCP通信客户端服务端代码实例

2019/11/21 Python

Pycharm远程连接服务器并实现代码同步上传更新功能

2020/02/25 Python

Python 解决火狐浏览器不弹出下载框直接下载的问题

2020/03/09 Python

HTML高亮关键字的实现代码

2018/10/22 HTML / CSS

html2 canvas生成清晰的图片实现打印功能

2019/09/23 HTML / CSS

财务务虚会发言材料

2014/10/20 职场文书

模范班主任事迹材料

2014/12/17 职场文书

2015年党员个人自我评价

2015/03/03 职场文书

仓库管理制度范本

2015/08/04 职场文书

小学校本教研总结

2015/08/13 职场文书

2016年万圣节活动个人总结

2016/04/05 职场文书

如何拟写通知正文？

2019/04/02 职场文书

导游词之阆中古城

2019/12/23 职场文书

写一个Python脚本自动爬取Bilibili小视频

2021/04/24 Python

排查Tomcat进程假死的问题

2022/05/06 Servers