编程 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 相关文章推荐

asp.net和asp下ACCESS的参数化查询

Jun 11 Javascript

js的匿名函数使用介绍

Dec 11 Javascript

javascript中判断json的方法总结

Aug 27 Javascript

深入剖析JavaScript编程中的对象概念

Oct 21 Javascript

深入解析JavaScript中的立即执行函数

May 21 Javascript

JavaScript编写一个简易购物车功能

Sep 17 Javascript

js本地图片预览实现代码

Oct 09 Javascript

Bootstrop实现多级下拉菜单功能

Nov 24 Javascript

详解vue-cli + webpack 多页面实例配置优化方法

Jul 13 Javascript

微信小程序之前台循环数据绑定

Aug 18 Javascript

利用es6 new.target来对模拟抽象类的方法

May 10 Javascript

JavaScript中的this妙用实例分析

May 09 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

深入了解php4(2)--重访过去

2006/10/09 PHP

PHP与SQL注入攻击[三]

2007/04/17 PHP

PHP内存缓存功能memcached示例

2016/10/19 PHP

php微信公众号开发之现金红包

2018/04/16 PHP

Maps Javascript

2007/01/22 Javascript

Jquery颜色选择器ColorPicker实现代码

2012/11/14 Javascript

js获取URL的参数的方法(getQueryString)示例

2013/09/29 Javascript

如何设置一定时间内只能发送一次请求

2014/02/28 Javascript

JavaScript实现的购物车效果可以运用在好多地方

2014/05/09 Javascript

jQuery可见性过滤器：hidden和：visibility用法实例

2015/06/24 Javascript

浅谈javascript获取元素transform参数

2015/07/24 Javascript

Sea.JS知识总结

2016/05/05 Javascript

全面接触神奇的Bootstrap导航条实战篇

2016/08/01 Javascript

微信小程序保留小数(toFixed)详细介绍

2016/11/16 Javascript

prototype与__proto__区别详细介绍

2017/01/09 Javascript

微信公众平台发送模板消息(Java接口开发)

2019/04/17 Javascript

利用不到200行代码写一款属于你自己的js类库

2019/07/08 Javascript

vue语法自动转typescript(解放双手)

2019/09/18 Javascript

[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾

2015/01/30 DOTA

[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16

2019/08/18 DOTA

Python比较文件夹比另一同名文件夹多出的文件并复制出来的方法

2015/03/05 Python

初步探究Python程序的执行原理

2015/04/11 Python

举例讲解Python中装饰器的用法

2015/04/27 Python

详解Python各大聊天系统的屏蔽脏话功能原理

2016/12/01 Python

python判断一个数是否能被另一个整数整除的实例

2018/12/12 Python

Python删除n行后的其他行方法

2019/01/28 Python

Python实现CNN的多通道输入实例

2020/01/17 Python

python 解决函数返回return的问题

2020/12/05 Python

HTML5 拖放（Drag 和 Drop）详解与实例代码

2017/09/14 HTML / CSS

CAD制图人员的自荐信

2014/02/07 职场文书

应届毕业生自荐信

2014/05/28 职场文书

个人总结与自我评价

2014/09/18 职场文书

2014年社区宣传工作总结

2014/12/02 职场文书

优秀党员事迹材料

2014/12/18 职场文书

主持人大赛开场白

2015/05/29 职场文书

推普标语口号大全

2015/12/26 职场文书