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

提高网站信任度的技巧

Oct 17 Javascript

限制文本框输入N个字符的js代码

May 13 Javascript

javascript是怎么继承的介绍

Jan 05 Javascript

用jquery仿做发微博功能示例

Apr 18 Javascript

vue2.0 中#$emit,$on的使用详解

Jun 07 Javascript

通过示例彻底搞懂js闭包

Aug 10 Javascript

bootstrap+jquery项目引入文件报错的解决方法

Jan 22 jQuery

Node使用Selenium进行前端自动化操作的代码实现

Oct 10 Javascript

微信小程序批量监听输入框对按钮样式进行控制的实现代码

Oct 12 Javascript

JS动态图片的实现方法完整示例

Jan 13 Javascript

Element Popover 弹出框的使用示例

Jul 26 Javascript

HTML+VUE分页实现炫酷物联网大屏功能

May 27 Vue.js

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

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

雄兵连：天使彦天使彦为爱折翼，彦和炙心同时念动的誓言！

2020/03/02 国漫

php的header和asp中的redirect比较

2006/10/09 PHP

php结合飞信免费天气预报短信

2009/05/07 PHP

php实现的遍历文件夹下所有文件,编辑删除

2010/01/05 PHP

PHP连接MySQL数据的操作要点

2015/03/20 PHP

PHP实现的mysql读写分离操作示例

2018/05/22 PHP

for 循环性能比较提高for循环的效率

2009/03/19 Javascript

从盛大通行证上摘下来的身份证验证js代码

2011/01/11 Javascript

getComputedStyle与currentStyle获取样式(style/class)

2013/03/19 Javascript

jquery获取多个checkbox的值异步提交给php

2015/07/07 Javascript

JS+CSS实现简单的二级下拉导航菜单效果

2015/09/21 Javascript

jQuery代码实现表格中点击相应行变色功能

2016/05/09 Javascript

React.js入门实例教程之创建hello world 的5种方式

2016/05/11 Javascript

简单的JS轮播图代码

2016/07/18 Javascript

seajs学习之模块的依赖加载及模块API的导出

2016/10/20 Javascript

JS中的Replace()传入函数时的用法详解

2017/09/11 Javascript

详解angularjs实现echart图表效果最简洁教程

2017/11/29 Javascript

vue2.x+webpack快速搭建前端项目框架详解

2017/11/30 Javascript

Express下采用bcryptjs进行密码加密的方法

2018/02/07 Javascript

nodejs图片处理工具gm用法小结

2018/12/12 NodeJs

layui动态绑定事件的方法

2019/09/20 Javascript

[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16

2018/08/17 DOTA

python自动化测试之setUp与tearDown实例

2014/09/28 Python

Python处理PDF及生成多层PDF实例代码

2017/04/24 Python

Python基于Opencv来快速实现人脸识别过程详解（完整版）

2019/07/11 Python

使用pygame写一个古诗词填空通关游戏

2019/12/03 Python

python 实现IP子网计算

2021/02/18 Python

利用css3 translate完美实现表头固定效果

2017/02/28 HTML / CSS

canvas实现手机的手势解锁的步骤详细

2020/03/16 HTML / CSS

英国领先的电子、技术和办公用品购物网站：Ebuyer

2018/04/04 全球购物

祖国在我心中演讲稿

2014/01/15 职场文书

高三学习决心书

2014/03/11 职场文书

离婚纠纷代理词

2015/05/23 职场文书

网吧温馨提示

2015/07/17 职场文书

意外事故赔偿协议书

2016/03/22 职场文书

Win7/8.1用户可以免费升级到Windows 11系统吗?

2021/11/21 数码科技