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

前提:配置好页面后

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

javascript 复制代码
<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里面写入逻辑代码:

javascript 复制代码
// 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
             })
        }
    }
})

三、结果显示:

相关推荐
霍先生的虚拟宇宙网络20 分钟前
webp 网页如何录屏?
开发语言·前端·javascript
jessezappy40 分钟前
jQuery-Word-Export 使用记录及完整修正文件下载 jquery.wordexport.js
前端·word·jquery·filesaver·word-export
旧林8431 小时前
第八章 利用CSS制作导航菜单
前端·css
yngsqq1 小时前
c#使用高版本8.0步骤
java·前端·c#
尘浮生1 小时前
Java项目实战II基于微信小程序的校运会管理系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
Myli_ing2 小时前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风2 小时前
前端 vue 如何区分开发环境
前端·javascript·vue.js
软件小伟2 小时前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾2 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧3 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript