编程 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模板引擎simplite

Feb 13 Javascript

js简单实现标签云效果实例

Aug 06 Javascript

jQuery增加与删除table列的方法

Mar 01 Javascript

jQuery实现按钮点击遮罩加载及处理完后恢复的效果

Jun 07 Javascript

jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例

Oct 10 Javascript

详解webpack+vue-cli项目打包技巧

Jun 17 Javascript

vue监听对象及对象属性问题

Aug 20 Javascript

vue中当图片地址无效的时候,显示默认图片的方法

Sep 18 Javascript

js控制随机数生成概率代码实例

Mar 21 Javascript

vue框架下部署上线后刷新报404问题的解决方案(推荐)

Apr 03 Javascript

jQuery实现input[type=file]多图预览上传删除等功能

Aug 02 jQuery

vue+swiper实现左右滑动的测试题功能

Oct 30 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

php Smarty模板生成html文档的方法

2010/04/12 PHP

php四种基础算法代码实例

2013/10/29 PHP

YiiFramework入门知识点总结(图文教程)

2015/12/28 PHP

PHP迭代与递归实现无限级分类

2017/08/28 PHP

jMessageBox 基于jQuery的窗口插件

2009/12/09 Javascript

JavaScript Distilled 基础知识与函数

2010/04/07 Javascript

js 遍历json返回的map内容示例代码

2013/10/29 Javascript

jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)

2014/05/11 Javascript

javascript入门之数组[新手必看]

2016/11/21 Javascript

JavaScript之iterable_动力节点Java学院整理

2017/06/29 Javascript

浅谈redux以及react-redux简单实现

2018/08/28 Javascript

vue多层嵌套路由实例分析

2019/03/19 Javascript

微信小程序中的列表切换功能实例代码详解

2020/06/09 Javascript

[42:52]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第二场 8.22

2018/08/23 DOTA

Python多线程同步Lock、RLock、Semaphore、Event实例

2014/11/21 Python

Python实现的简单hangman游戏实例

2015/06/28 Python

Python数据类型详解（一）字符串

2016/05/08 Python

Python数据结构之翻转链表

2017/02/25 Python

python获取多线程及子线程的返回值

2017/11/15 Python

Python wxpython模块响应鼠标拖动事件操作示例

2018/08/23 Python

python中的for循环

2018/09/28 Python

DES加密解密算法之python实现版(图文并茂)

2018/12/06 Python

sklearn的predict_proba使用说明

2020/06/28 Python

python输入中文的实例方法

2020/09/14 Python

Python importlib模块重载使用方法详解

2020/10/13 Python

selenium+python实现基本自动化测试的示例代码

2021/01/27 Python

Python使用tkinter制作在线翻译软件

2021/02/22 Python

英国玛莎百货美国官网：Marks & Spencer美国

2018/11/06 全球购物

党员个人对照检查材料思想汇报

2014/09/16 职场文书

外国人来华邀请函

2015/01/31 职场文书

党员承诺书格式范文

2015/04/28 职场文书

涨工资申请书应该怎么写？

2019/07/08 职场文书

python基于OpenCV模板匹配识别图片中的数字

2021/03/31 Python

JavaScript实现淘宝商品图切换效果

2021/04/29 Javascript

Python中else的三种使用场景

2021/06/16 Python

win10以太网连接不上怎么办?Win10连接以太网详细教程

2022/04/08 数码科技