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

首先在index.wxml页面写一个测试页面

如图：

代码如下

接下来就是比较功能的实现

第一种方法

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

如图

接下来在index.js中实现

代码如下

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

第二种方法

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

通过id和dataset来获取元素

1.通过id获取

代码具体实现如下

2.通过dataset来获取元素

具体代码实现如下

第三种方法

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

具体实现代码如下

第四种方法

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

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

或者

第五种方法

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

实现代码如下

最终成功运行如下

总结

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

赞 (0)

相关推荐

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

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

    写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别. 一.生命周期 先贴两张图: vue生命周期 小程序生命周期 相比之下,小程序的钩子函数要简单得多. vue的钩子函数在跳转新页面时,钩子函数都会触发,但是小程序的钩子函数,页面不同的跳转方式,触发的钩子并不一样.onLoad:页面加载 一个页面只会调用一次,可以在 onLoad 中获取打开当前页面所调用的 query 参数. onShow:页面显示 每次打开页面都会调用一次. onReady:页面初次渲染完成 一

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

    首先在index.wxml页面写一个测试页面 如图: 代码如下 接下来就是比较功能的实现 第一种方法 首先在两个input组件中用bindchange方法绑定事件处理函数,在button组件中用bindtap绑定事件函数 如图 接下来在index.js中实现 代码如下 适用于页面中少量input组件的情况 第二种方法 第二种方法为两个input组件绑定相同的函数 通过id和dataset来获取元素 1.通过id获取 代码具体实现如下 2.通过dataset来获取元素 具体代码实现如下 第三种方法

  • 微信小程序开发之获取用户信息的两种方法

    微信小程序开发之获取用户信息的两种方法

    今天介绍两种微信小程序获取用户信息的方法 第一中直接授权获取(在同一页面之中): 首先在微信程序一个页面的WXML文件写入获取用户信息的按钮 <!-- bindTap用于绑定事件 --> <button type="default" bindtap="getUserInfor"> 登录</button> <!-- 展示获取到的用户信息 --> <image src="{{userinfor.avatar

  • 微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析

    微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析

    本文实例讲述了微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法.分享给大家供大家参考,具体如下: 微信小程序为2017年1月9日打下了一个特殊的标签,迅速刷爆了网络和朋友圈,最近我也写了一个demo程序体验一把.微信小程序和vuejs有些像,都是数据驱动视图&单向数据绑定,而其体验要比H5页面好很多,这得益于微信环境的支持以及首次运行时同时加载所有页面的处理.本文将分享微信小程序列表的下拉刷新和上划加载的实践. 效果图 首先来看看程序效果图,以下四张图从左至右依次是:下来刷新动画.下拉刷

  • 微信小程序实现Session功能及无法获取session问题的解决方法

    因为小程序原生不支持Cookie,因此也不支持Session. 网上找到的的一些方法有缺陷,而且很多累赘,估计没有实际测试过,在此直接给出实测可用的代码. 大概思路就是借助小程序本地储存+网络请求的header可读可写来实现类似浏览器的cookies保存session功能. 直接上代码 function NetRequest({url, data, success, fail, complete, method = "POST", header = { 'Content-type':

  • 微信小程序开发常用功能点与使用方法总结

    在这里,我主要整理了一些小程序开发过程中常用的功能点,非常实用,下面来一看看看吧 1.获取高度宽度 var windowHeight = wx.getSystemInfoSync().windowHeight var windowWidth = wx.getSystemInfoSync().windowWidth 2.动态绑定 style 样式 和class class="operBtn {{select==1?'activeClass':''}}" style="displ

  • 微信小程序 配置顶部导航条标题颜色的实现方法

    微信小程序 配置顶部导航条标题颜色的实现方法

    微信小程序 配置顶部导航条标题颜色的实现方法 关于小程序导航顶部配置都写在.json文件中. { "window":{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "bac

  • 微信小程序 在线支付功能的实现

    微信小程序 在线支付功能的实现

    微信小程序 在线支付功能 最近需要在微信小程序中用到在线支付功能,于是看了一下官方的文档,发现要在小程序里实现微信支付还是很方便的,如果你以前开发过服务号下的微信支付,那么你会发现其实小程序里的微信支付和服务号里的开发过程如出一辙,下面我就具体说一下小程序里微信支付的开发流程和注意点. 1.开通微信支付和微信商户号 这个过程就和开通服务号的微信支付过程一样,没有什么可以说的. 2.获得用户的openid 首页我们需要在小程序的客户端js中获取当前用户的openid,通过调用wx.login方法可

  • Android中微信小程序支付倒计时功能

    Android中微信小程序支付倒计时功能

    看效果 由于web 经验弱爆- -  一开始我的思路是找事件,但是看了半天API 基本都是点击触摸,通过物理触发- - 我居然忽略了生命周期,生命周期+线程不就完全OK吗- 事实证明,线程还是王道啊,一开始就应该这么搞嘛- 度娘上面也看了很多都是用js写的,but,可能刚做没几天吧,我对js与微信小程序掌握还不够熟练 思路: onLoad:function(options)调用倒计时方法函数 定义线程进行数据动态现实 1. 日期转化成毫秒 2.定义线程动态显示 3.渲染倒计时 1.毫秒转成固定格

  • 微信小程序收货地址API兼容低版本解决方法

    微信官方在三月底搞了不少事情.开放个人注册权限,蓝牙,与公众号打通,未来还会开发AR,图片识别,文字识别等等能力. 起初大家只是将微信小程序当做玩具看待,相信如今会有很多人把他当成一门技术去研究了.微信小程序的想象空间已经很大. 说说新增API之一的收货地址.虽然看看兼容低版本. 先上图. API很简单,就一行代码 wx.chooseAddress(OBJECT) 调起的是原生页面,体验很不错.对电商类的小程序比较有利. 不过API是从微信客户端 6.5.6 版本开始支持.这让我想起来做andr

  • 微信小程序录音实现功能并上传(使用node解析接收)

    背景 我在开发小程序的时候,有需求要实现录音功能,并能上传给服务器.小程序录音功能我是使用的微信的wx.getRecorderManager()实现的,通过该方法创建实例,实例录音得到的文件是本地临时文件,上传文件需要使用微信的wx.uploadFile(Object object)方法,这就是本次项目的背景. 小程序端 html页面主要是第一个按钮,两个事件,长按开始录音,松手停止录音.第二个按钮只是一个播放录音的功能,用于确定录音是否成功 <!--pages/record/record.wx

随机推荐