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

node.js Web应用框架Express入门指南

May 28 Javascript

jQuery中:empty选择器用法实例

Dec 30 Javascript

详解JavaScript数组的操作大全

Oct 19 Javascript

AngularJs ng-route路由详解及实例代码

Sep 14 Javascript

jQuery实现的省市联动菜单功能示例【测试可用】

Jan 13 Javascript

JS中from 表单序列化提交的代码

Jan 20 Javascript

Javascript中字符串相关常用的使用方法总结

Mar 13 Javascript

基于vue2.0实现的级联选择器

Jun 09 Javascript

js装饰设计模式学习心得

Feb 17 Javascript

vue组件中使用props传递数据的实例详解

Apr 08 Javascript

详解vue中$nextTick和$forceUpdate的用法

Dec 11 Javascript

在vue中created、mounted等方法使用小结

Jul 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

深入探讨<br />和 \r\n两者有什么区别??

2013/06/05 PHP

制作安全性高的PHP网站的几个实用要点

2014/12/30 PHP

php使用类继承解决代码重复的问题

2015/02/11 PHP

php字符串函数学习之strstr()

2015/03/27 PHP

Zend Framework框架之Zend_Mail实现发送Email邮件验证功能及解决标题乱码的方法

2016/03/21 PHP

PHP模板引擎Smarty内建函数section,sectionelse用法详解

2016/04/11 PHP

php实现session共享的实例方法

2019/09/19 PHP

JavaScript 学习点滴记录

2009/04/24 Javascript

JavaScript判断是否为数字的4种方法及效率比较

2015/04/01 Javascript

TypeScript 中接口详解

2015/06/19 Javascript

数据结构中的各种排序方法小结(JS实现)

2016/07/23 Javascript

Jquery获取当前城市的天气信息

2016/08/05 Javascript

浅谈angularjs module返回对象的坑(推荐)

2016/10/21 Javascript

Javascript 闭包详解及实例代码

2016/11/30 Javascript

vue实现简单实时汇率计算功能

2017/01/15 Javascript

基于AngularJS实现的工资计算器实例

2017/06/16 Javascript

原生JS实现网页手机音乐播放器歌词同步播放的示例

2018/02/02 Javascript

利用Console来Debug的10个高级技巧汇总

2018/03/26 Javascript

VUE v-for循环中每个item节点动态绑定不同函数的实例

2018/09/26 Javascript

微信小程序登录数据解密及状态维持实例详解

2019/05/06 Javascript

Vue使用axios引起的后台session不同操作

2020/08/14 Javascript

vue常用高阶函数及综合实例

2021/02/25 Vue.js

[02:36]DOTA2上海特锦赛回忆电竞生涯的重要瞬间

2016/03/25 DOTA

Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例

2014/06/10 Python

Python实现Const详解

2015/01/27 Python

详解如何用TensorFlow训练和识别/分类自定义图片

2019/08/05 Python

python使用celery实现异步任务执行的例子

2019/08/28 Python

Python爬取豆瓣视频信息代码实例

2019/11/16 Python

科颜氏美国官网：Kiehl’s美国

2017/01/31 全球购物

英国女装网上商店：I Saw It First

2018/10/18 全球购物

声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同

2012/06/02 面试题

团工委书记自荐书范文

2013/12/17 职场文书

书法大赛策划方案

2014/06/04 职场文书

2014高考励志标语

2014/06/05 职场文书

部门活动策划方案

2014/08/16 职场文书

校运会广播稿

2015/08/19 职场文书