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

更新时间：2020年03月07日 11:38:19 作者：LeslieChen2

这篇文章主要介绍了微信小程序实现比较功能的方法，本文给大家列举出五种方式，每种方法通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

第一种方法

首先在两个input组件中用bindchange方法绑定事件处理函数，在button组件中用bindtap绑定事件函数

如图

在这里插入图片描述

接下来在index.js中实现

代码如下

在这里插入图片描述

适用于页面中少量input组件的情况

第二种方法

第二种方法为两个input组件绑定相同的函数

通过id和dataset来获取元素

1.通过id获取

在这里插入图片描述

代码具体实现如下

在这里插入图片描述

2.通过dataset来获取元素

在这里插入图片描述

具体代码实现如下

在这里插入图片描述

第三种方法

在text组件上直接处理计算逻辑

在这里插入图片描述

具体实现代码如下

在这里插入图片描述

第四种方法

通过条件渲染的方式比较大小

使用wx:if或者wx:if wx:else实现

在这里插入图片描述

或者

在这里插入图片描述

第五种方法

通过表单获取input组件的值，比较结果

在这里插入图片描述

实现代码如下

在这里插入图片描述

最终成功运行如下

在这里插入图片描述

总结

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

您可能感兴趣的文章:

浅析Vue 和微信小程序的区别、比较

html5+CSS 实现禁止IOS长按复制粘贴功能
因为在移动端APP需要实现长按执行别的事件，但是在iOS系统有默认的长按选择复制粘贴。禁止在网上找了很多资料，下面小编给大家分享解决方案，一起看看吧
2016-12-12
Javascript中的包装类型介绍
这篇文章主要介绍了Javascript中的包装类型介绍,包装类型是指在执行代码的一瞬间把数据包装成引用类型,本文讲解的就是这个小知识,需要的朋友可以参考下
2015-04-04
HTML+CSS+JavaScript实现简单日历效果
这篇文章主要为大家详细介绍了HTML+CSS+JavaScript实现简单日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
js实现div的切换特效上一个下一个
实现div切换的方法有很多，下面为大家介绍下使用js是如何实现的
2014-02-02
五句话帮你轻松搞定js原型链
这篇文章主要给大家介绍了关于js原型链的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-12-12
javascript函数式编程程序员的工具集
函数式编程语言一向被认为是比其它编程语言更高深的语言。一是因为函数式编程语言的语法很另类，比如Lisp语言，二是因为函数式编程语言都很古老，比如Schema语言。在如今面向对象语言大行其道的时代，函数式编程语言有其特殊的优势
2015-10-10
JavaScript this指向相关原理及实例解析
这篇文章主要介绍了JavaScript this指向相关原理及实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-07-07
JavaScript实现的七种排序算法总结（推荐！）
这篇文章主要给大家介绍了关于JavaScript实现的七种排序算法的相关资料,七种排序算法分别是：冒泡排序、选择排序、插入排序、希尔排序、堆排序、快速排序以及归并排序,需要的朋友可以参考下
2021-07-07
原生Javascript和jQuery做轮播图简单例子
这篇文章主要为大家详细介绍了原生Javascript和jQuery做轮播图简单例子,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
javascript 特殊字符串
js字符串中出现任何< >标签都可以，就是不能出现</script>标签。
2009-02-02