微信小程序的页面交互练习——实现比较两数大小功能

news/2024/7/20 4:00:46 标签: 微信小程序, 交互, 小程序, 前端

前提:配置好页面后

一、在wxml里面搭建好框架:

<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<scroll-view class="scrollarea" scroll-y type="list">
<text>数字1</text>
<input bind:change="test1" style="border: 1px solid black;" type="text"/>
<text>数字2</text>
<input bind:change="test2" style="border: 1px solid black;" type="text"/>
<button bind:tap="test3">比较</button>
<text>结果:\n</text>
{{result}}
<text></text>
</scroll-view>

二、在js里面写入逻辑代码:

// pages/list/list.js
Page({
    data: {
    },
    test1:function(e){
        this.setData({
            a:Number(e.detail.value),
         })
    }, //第一个数
    test2:function(e){
        this.setData({
            b:Number(e.detail.value),
         })
    }, //第二个数
    test3:function(){ //比较
        if(this.data.a<this.data.b){
        this.setData({
            result:this.data.a+"小于"+this.data.b
         })
        }
        else if(this.data.a==this.data.b){
            this.setData({
                result:this.data.a+"等于"+this.data.b
             })
        }
        else{
            this.setData({
                result:this.data.a+"大于"+this.data.b
             })
        }
    }
})

三、结果显示:


http://www.niftyadmin.cn/n/5454639.html

相关文章

TCP/IP:互联网通信的核心协议

引言 在当今数字化时代&#xff0c;互联网已经成为人类社会不可或缺的一部分&#xff0c;而TCP/IP协议则是支撑互联网运作的关键。无论是发送电子邮件、浏览网页&#xff0c;还是进行视频通话&#xff0c;TCP/IP协议都在背后默默地发挥着作用。本文将引领读者深入了解TCP/IP协…

最新的Flutter3.x版本获取应用包名的方法

以前的flutter项目可以在 AndroidManifest.xml 中获取应用包名&#xff0c; 最新的Flutter3.x版本要获取应用包名可以找到build.gradle 更多内容参考&#xff1a;最新的Flutter3.x版本如何获取应用包名

Scikit-learn 数据挖掘和数据分析工具的使用指南

Scikit-learn是Python中一款非常强大且广泛使用的数据挖掘和数据分析工具。它为数据挖掘和数据分析任务提供了简单高效的接口&#xff0c;涵盖了分类、回归、聚类、降维、模型选择等多个方面。以下是一份详细的使用指南&#xff0c;帮助用户更好地理解和使用Scikit-learn。 一…

区块链备案,为信息安全加把锁

你们是否对区块链这一热门话题有所耳闻呢&#xff1f;今天&#xff0c;我们不谈技术细节&#xff0c;不聊高深概念&#xff0c;只说说与我们息息相关的区块链备案问题。随着区块链技术的快速发展&#xff0c;越来越多的区块链信息服务涌现出来。然而&#xff0c;在众多服务中&a…

鸿蒙雄起!风口就在当下,你如何抉择?

近年来&#xff0c;华为自主研发的鸿蒙操作系统&#xff08;HarmonyOS&#xff09;引起了广泛的关注和讨论。鸿蒙系统不仅标志着华为在软件领域的一次重大突破&#xff0c;也预示着全球智能设备市场格局的潜在变化。本文将深入探讨鸿蒙系统的兴起、其在市场上的表现以及对程序员…

《每天十分钟》-红宝书第4版-对象、类与面向对象编程(六)

盗用构造函数 上节提到原型包含引用值导致的继承问题&#xff0c;为了解决这种问题&#xff0c;一种叫作“盗用构造函数”&#xff08;constructor stealing&#xff09;的技术在开发社区流行起来&#xff08;这种技术有时也称作“对象伪装”或“经典继承”&#xff09;。基本…

【SpringSecurity】基础入门

目录 权限管理什么是权限管理认证授权权限管理解决方案Shiro开发者自定义Spring Security Spring Security特性Spring、Spring Boot 和 Spring Security 三者的关系整体架构1.认证AuthenticationManagerAuthenticationSecurityContextHolder 2.授权AccessDecisionManagerAccess…

webpack.dev.js(webpack开发环境配置文件)

开发环境&#xff1a;只运行本地资源不打包dist 对于在config目录下的webpack.dev.js 1.在根目录下运行 npx webpack serve --config ./config/webpack.dev.js 2.在package.json文件中配置 "dev":"npx webpack serve --config ./config/webpack.dev.js&quo…