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

List all the Databases on a SQL Server

Jun 21 Javascript

Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]

Sep 26 Javascript

jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)

Feb 04 Javascript

javascript创建和存储cookie示例

Jan 07 Javascript

js左右弹性滚动对联广告代码分享

Feb 19 Javascript

JavaScript link方法入门实例（给字符串加上超链接）

Oct 17 Javascript

Angular中的Promise对象($q介绍)

Mar 03 Javascript

jQuery+CSS3折叠卡片式下拉列表框实现效果

Nov 02 Javascript

jQuery实现的图片轮播效果完整示例

Sep 12 Javascript

javascript获取指定区间范围随机数的方法

Sep 08 Javascript

jquery动态添加带有样式的HTML标签元素方法

Feb 24 jQuery

微信小程序自定义支持图片的弹窗

Dec 21 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

页面乱码问题的根源及其分析

2013/08/09 PHP

php删除数组元素示例分享

2014/02/17 PHP

smarty高级特性之对象的使用方法

2015/12/25 PHP

PHP中模糊查询并关联三个select框

2017/06/19 PHP

解决出现SoapFault (looks like we got no XML document)的问题

2017/06/24 PHP

更正确的asp冒泡排序

2007/05/24 Javascript

浅谈JavaScript的Polymer框架中的behaviors对象

2015/07/29 Javascript

理解javascript中DOM事件

2015/12/25 Javascript

50 个 jQuery 插件可将你的网站带到另外一个高度

2016/04/26 Javascript

JS产生随机数的用法小结

2016/12/10 Javascript

jquery拖动改变div大小

2017/07/04 jQuery

JavaScript中Require调用js的实例分享

2017/10/27 Javascript

React Native 自定义下拉刷新上拉加载的列表的示例

2018/03/01 Javascript

React Native使用fetch实现图片上传的示例代码

2018/03/07 Javascript

js Element Traversal规范中的元素遍历方法

2018/04/19 Javascript

从理论角度讨论JavaScript闭包

2019/04/03 Javascript

Python多进程并发与多线程并发编程实例总结

2018/02/08 Python

python实现朴素贝叶斯分类器

2018/03/28 Python

对python中for、if、while的区别与比较方法

2018/06/25 Python

详解python中sort排序使用

2019/03/23 Python

python实现图片转字符小工具

2019/04/30 Python

Python中拆分字符串的操作方法

2019/07/23 Python

用Python写一个自动木马程序

2019/09/17 Python

Python函数参数类型及排序原理总结

2019/12/19 Python

Python延迟绑定问题原理及解决方案

2020/08/04 Python

Python利用myqr库创建自己的二维码

2020/11/24 Python

python 使用xlsxwriter循环向excel中插入数据和图片的操作

2021/01/01 Python

澳大利亚领先的在线美容商城：Adore Beauty

2017/04/14 全球购物

美国礼品卡商城： Gift Card Mall

2017/08/25 全球购物

合作协议书模板

2014/10/10 职场文书

街道务虚会发言材料

2014/10/20 职场文书

我是特种兵观后感

2015/06/11 职场文书

《比尾巴》教学反思

2016/02/24 职场文书

Nginx的rewrite模块详解

2021/03/31 Servers

详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法

2021/04/25 Python

SQL Server数据库基本概念、组成、常用对象与约束

2022/03/20 SQL Server