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

jQuery获得内容和属性方法及示例

Dec 02 Javascript

JavaScript实现信用卡校验方法

Apr 07 Javascript

JS实现图片高亮展示效果实例

Nov 24 Javascript

JavaScript判断数字是否为质数的方法汇总

Jun 02 Javascript

JS判断是否在微信浏览器打开的简单实例(推荐)

Aug 24 Javascript

深入浅析Vue组件开发

Nov 25 Javascript

PHP7新特性简述

Jun 11 Javascript

Element UI 自定义正则表达式验证方法

Sep 04 Javascript

使用taro开发微信小程序遇到的坑总结

Apr 08 Javascript

JavaScript深入V8引擎以及编写优化代码的5个技巧

Jun 24 Javascript

vue（2.x，3.0）配置跨域代理

Nov 27 Javascript

three.js利用射线Raycaster进行碰撞检测

Mar 12 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

thinkPHP中分页用法实例分析

2015/12/26 PHP

thinkphp3.x中变量的获取和过滤方法详解

2016/05/20 PHP

基于jquery的不规则矩形的排列实现代码

2012/04/16 Javascript

jquery属性选择器not has怎么写行悬停高亮显示

2013/11/13 Javascript

JavaScript怎么判断图片是否加载完成以便获取其尺寸

2014/05/08 Javascript

Backbone.js的Hello World程序实例

2015/06/19 Javascript

JQuery入门基础小实例(1)

2015/09/17 Javascript

详解JavaScript中数组的reduce方法

2016/12/02 Javascript

基于jQuery实现的单行公告活动轮播效果

2017/08/23 jQuery

bootstrap fileinput实现文件上传功能

2017/08/23 Javascript

js使用xml数据载体实现城市省份二级联动效果

2017/11/08 Javascript

opencv 识别微信登录验证滑动块位置

2018/08/07 Javascript

Vue vm.$attrs使用场景详解

2020/03/08 Javascript

Python中二维列表如何获取子区域元素的组成

2017/01/19 Python

python 文件操作删除某行的实例

2017/09/04 Python

在Python中居然可以定义两个同名通参数的函数

2019/01/31 Python

解决Python 使用h5py加载文件,看不到keys()的问题

2019/02/08 Python

Python3.0中普通方法、类方法和静态方法的比较

2019/05/03 Python

python创建ArcGIS shape文件的实现

2019/12/06 Python

python 的numpy库中的mean()函数用法介绍

2020/03/03 Python

利用Python自动化操作AutoCAD的实现

2020/04/01 Python

Python自动化测试中yaml文件读取操作

2020/08/20 Python

基于python实现简单C/S模式代码实例

2020/09/14 Python

button在IE6/7下的黑边去除方案

2012/12/24 HTML / CSS

纯CSS3实现8组超炫酷鼠标滑过图片动画

2016/03/16 HTML / CSS

英国最大的在线床超市：Bed Star

2019/01/24 全球购物

社会实践心得体会

2014/01/03 职场文书

员工评语大全

2014/01/19 职场文书

社区健康教育实施方案

2014/03/18 职场文书

学院党委班子四风问题自查报告及整改措施

2014/10/25 职场文书

2014年大学宣传部工作总结

2014/12/19 职场文书

欢迎词怎么写

2015/01/23 职场文书

实施意见格式范本

2015/06/05 职场文书

基于Python编写简易版的天天跑酷游戏的示例代码

2022/03/23 Python

MongoDB支持的索引类型

2022/04/11 MongoDB

讲解MySQL增删改操作

2022/05/06 MySQL