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

利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码

Oct 22 Javascript

如何使用Jquery获取Form表单中被选中的radio值

Aug 09 Javascript

Extjs改变树节点的勾选状态点击按钮将复选框去掉

Nov 14 Javascript

javascript使用定时函数实现跳转到某个页面

Dec 25 Javascript

js验证IP及子网掩码的合法性有效性示例

Apr 30 Javascript

JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法

Nov 03 Javascript

javascript委托(Delegate)blur和focus用法实例分析

May 26 Javascript

jQuery判断邮箱格式对错实例代码讲解

Apr 12 jQuery

vue 属性拦截实现双向绑定的实例代码

Oct 24 Javascript

jQuery无冲突模式详解

Jan 17 jQuery

vue实现一拉到底的滑动验证

Jul 25 Javascript

详解Vue3 Teleport 的实践及原理

Dec 02 Vue.js

微信小程序实现下滑到底部自动翻页功能

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 图片加水印与上传图片加水印php类

2010/05/12 PHP

codeigniter数据库操作函数汇总

2014/06/12 PHP

windows平台中配置nginx+php环境

2015/12/06 PHP

PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)

2016/12/02 PHP

一个简单的js渐显(fadeIn)渐隐(fadeOut)类

2010/06/19 Javascript

js页面滚动时层智能浮动定位实现(jQuery/MooTools)

2011/08/23 Javascript

解决js数据包含加号+通过ajax传到后台时出现连接错误

2013/08/01 Javascript

JS点击链接后慢慢展开隐藏着图片的方法

2015/02/17 Javascript

jquery实现标签上移、下移、置顶

2015/04/26 Javascript

Bootstrap创建可折叠的组件

2016/02/23 Javascript

解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题

2017/06/05 Javascript

微信小程序下拉菜单效果的实例代码

2019/05/14 Javascript

bootstrap Table实现合并相同行

2019/07/19 Javascript

typescript配置alias的详细步骤

2020/08/12 Javascript

[03:05]《我与DAC》之xiao8：DAC与BG

2018/03/27 DOTA

[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3

2018/06/04 DOTA

Python pass详细介绍及实例代码

2016/11/24 Python

你眼中的Python大牛应该都有这份书单

2017/10/31 Python

python版opencv摄像头人脸实时检测方法

2018/08/03 Python

python爬取微信公众号文章

2018/08/31 Python

利用Python实现原创工具的Logo与Help

2018/12/03 Python

对Python w和w+权限的区别详解

2019/01/23 Python

django搭建项目配置环境和创建表过程详解

2019/07/22 Python

利用PyQt中的QThread类实现多线程

2020/02/18 Python

Django模板获取field的verbose_name实例

2020/05/19 Python

python代码实现猜拳小游戏

2020/11/30 Python

详解HTML5 Canvas绘制不规则图形时的非零环绕原则

2016/03/21 HTML / CSS

Desigual德国官网：在线购买原创服装

2018/03/27 全球购物

公司培训欢迎词

2014/01/10 职场文书

模特职业生涯规划范文

2014/02/26 职场文书

《大作家的小老师》教学反思

2014/04/16 职场文书

民政局办理协议离婚（范本）

2014/10/25 职场文书

农村婚礼司仪主持词

2015/06/29 职场文书

告别网页搜索!教你用python实现一款属于自己的翻译词典软件

2021/06/03 Python

C3 线性化算法与 MRO之Python中的多继承

2021/10/05 Python

Spring Boot接口定义和全局异常统一处理

2022/04/20 Java/Android