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

javascript 获取模态窗口的滚动位置代码

Aug 06 Javascript

JavaScript将页面表格导出为Excel的具体实现

Dec 27 Javascript

js实现跨域的多种方法

Dec 25 Javascript

基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动

Feb 08 Javascript

详解node nvm进行node多版本管理

Oct 21 Javascript

js 索引下标之li集合绑定点击事件

Jan 12 Javascript

JS通过位运算实现权限加解密

Aug 14 Javascript

layer.close()关闭进度条和Iframe窗的方法

Aug 17 Javascript

electron + vue项目实现打印小票功能及实现代码

Nov 25 Javascript

vscode vue 文件模板的配置方法

Jul 23 Javascript

JS实现商城秒杀倒计时功能(动态设置秒杀时间)

Dec 12 Javascript

js实现批量删除功能

Aug 27 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环境下利用session防止页面重复刷新的具体实现

2014/01/09 PHP

ThinkPHP跳转页success及error模板实例教程

2014/07/17 PHP

详解PHP多个进程配合redis的有序集合实现大文件去重

2019/03/06 PHP

尽可能写"友好"的"Javascript"代码

2007/01/09 Javascript

jQuery学习笔记获取jQuery对象

2012/09/19 Javascript

Jquery选择子控件"大于号"和" "区别介绍及使用示例

2013/06/25 Javascript

Extjs实现进度条的两种便捷方式

2013/09/26 Javascript

JS判断对象是否存在的10种方法总结

2013/12/23 Javascript

JavaScript检测实例属性, 原型属性

2015/02/04 Javascript

Bootstrap表单组件教程详解

2016/04/26 Javascript

深入浅析JavaScript中with语句的理解

2016/05/12 Javascript

JavaScript检测原始值、引用值、属性

2016/06/20 Javascript

jquery点击展示与隐藏更多内容

2016/12/03 Javascript

jquery实现图片轮播器

2017/05/23 jQuery

JS实现给json数组动态赋值的方法示例

2020/03/19 Javascript

vue-cli常用设置总结

2018/02/24 Javascript

Javasript设计模式之链式调用详解

2018/04/26 Javascript

基于vue循环列表时点击跳转页面的方法

2018/08/31 Javascript

jQuery中each遍历的三种方法实例分析

2018/09/07 jQuery

解决layer弹出层自适应页面大小的问题

2019/09/16 Javascript

Python 连接字符串(join %)

2008/09/06 Python

Python中实现字符串类型与字典类型相互转换的方法

2014/08/18 Python

scrapy爬虫完整实例

2018/01/25 Python

Python堆排序原理与实现方法详解

2018/05/11 Python

python快速编写单行注释多行注释的方法

2019/07/31 Python

深入了解Python在HDA中的应用

2019/09/05 Python

安装完Python包然后找不到模块的解决步骤

2020/02/13 Python

python解析xml文件方式(解析、更新、写入)

2020/03/05 Python

解决tensorflow/keras时出现数组维度不匹配问题

2020/06/29 Python

华为旗下电子商务平台：华为商城

2016/08/06 全球购物

JBL英国官网：JBL UK

2018/07/04 全球购物

Mamaearth官方网站：印度母婴护理产品公司

2019/10/06 全球购物

安全承诺书格式

2014/05/21 职场文书

学校政风行风评议工作总结

2014/10/21 职场文书

2016年小学“我们的节日·中秋节”活动总结

2016/04/05 职场文书

2019年个人工作总结范文（3篇）

2019/08/27 职场文书