微信小程序实现比较功能的方法汇总(五种方法)


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组件的值,比较结果

微信小程序实现比较功能的方法汇总(五种方法)

实现代码如下

微信小程序实现比较功能的方法汇总(五种方法)

最终成功运行如下

微信小程序实现比较功能的方法汇总(五种方法)

总结

到此这篇关于微信小程序实现比较功能的方法汇总(五种方法)的文章就介绍到这了,更多相关微信小程序比较内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

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