编程 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开发时的五个注意事项

Dec 08 Javascript

Discuz! 6.1_jQuery兼容问题

Sep 23 Javascript

一个很简单的jquery+xml+ajax的无刷新树结构(无css，后台是c#)

Jun 02 Javascript

用原生JavaScript实现jQuery的$.getJSON的解决方法

May 03 Javascript

js获取input长度并根据页面宽度设置其大小及居中对齐

Aug 22 Javascript

js实现字符串和数组之间相互转换操作

Jan 12 Javascript

简单讲解jQuery中的子元素过滤选择器

Apr 18 Javascript

微信小程序 wxapp视图容器 view详解

Oct 31 Javascript

浅谈vuex 闲置状态重置方案

Jan 04 Javascript

对vue v-if v-else-if v-else 的简单使用详解

Sep 29 Javascript

layui的select联动实现代码

Sep 28 Javascript

javascript canvas实现简易时钟例子

Sep 05 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

自动把纯文本转换成Web页面的php代码

2009/08/27 PHP

JavaScript 比较时间大小的代码

2010/04/24 Javascript

jquery使用淘宝接口跨域查询手机号码归属地实例

2013/11/28 Javascript

详解Angularjs中的依赖注入

2016/03/11 Javascript

Javascript json object 与string 相互转换的简单实现

2016/09/27 Javascript

ionic中列表项增加和删除的实现方法

2017/01/22 Javascript

如何正确理解javascript的模块化

2017/03/02 Javascript

解决vue-cli中stylus无法使用的问题方法

2017/06/19 Javascript

Nginx 配置多站点vhost 的方法

2018/01/07 Javascript

webpack 单独打包指定JS文件的方法

2018/02/22 Javascript

vue.js将时间戳转化为日期格式的实现代码

2018/06/05 Javascript

Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果

2018/07/27 Javascript

node.js处理前端提交的GET请求

2019/08/30 Javascript

[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29

2020/12/02 DOTA

Python基于多线程实现抓取数据存入数据库的方法

2018/06/22 Python

Window 64位下python3.6.2环境搭建图文教程

2018/09/19 Python

深入浅析Python 中 is 语法带来的误解

2019/05/07 Python

Pytorch Tensor的统计属性实例讲解

2019/12/30 Python

解决Tensorflow占用GPU显存问题

2020/02/03 Python

pycharm开发一个简单界面和通用mvc模板(操作方法图解)

2020/05/27 Python

乌克兰移动电子产品和相关配件的在线商店：iTMag

2020/03/16 全球购物

四年级科学教学反思

2014/02/10 职场文书

社区母亲节活动记录

2014/03/06 职场文书

设计顾问服务计划书

2014/05/04 职场文书

第二课堂活动总结

2014/05/07 职场文书

团队精神的演讲稿

2014/05/14 职场文书

课外访万家心得体会

2014/09/03 职场文书

2015大学生实训报告

2014/11/05 职场文书

2014年班主任德育工作总结

2014/12/05 职场文书

教师听课评语大全

2014/12/31 职场文书

保研专家推荐信范文

2015/03/25 职场文书

电影小兵张嘎观后感

2015/06/03 职场文书

赞助商致辞

2015/07/30 职场文书

SpringBoot系列之MongoDB Aggregations用法详解

2022/02/12 MongoDB

「玫瑰之王的葬礼」舞台剧主视觉图公开

2022/03/21 日漫

VMware虚拟机安装 Windows Server 2022的详细图文教程

2022/09/23 Servers