开发者社区> 流楚丶格念> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

微信小程序——比较数字大小案例

简介: 微信小程序——比较数字大小案例
+关注继续查看

案例链接


https://download.csdn.net/download/weixin_45525272/16242285


页面效果


image


讲解


image


代码


页面样式


/* pages/index/index.wxss */

view {
  margin: 50rpx;
}

input {
  width: 600rpx;
  margin-top: 20rpx;
  border-bottom: 2rpx solid #ccc;
}

button {
  margin: 50rpx;
}

button {
  color: #fff;
  background: #FF6000;
  letter-spacing: 12rpx;
}


页面设计


<!--pages/index/index.wxml-->
<view>
  <text>请输入第1个数字:</text>
  <input type="number" bindchange="num1change" />
</view>
<view>
  <text>请输入第2个数字:</text>
  <input type="number" bindchange="num2change" />
</view>
<button bindtap="compare">比较</button>
<view>
  <text>比较结果:{{result}}</text>
</view>


页面逻辑


// pages/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    result: ''
  },

  num1: 0, // 保存第1个数字
  num2: 0, // 保存第2个数字

  num1change: function(e) {
    this.num1 = Number(e.detail.value)
    console.log('第1个数字为' + this.num1)
  },

  num2change: function(e) {
    this.num2 = Number(e.detail.value)
    console.log('第2个数字为' + this.num2)
  },

  compare: function(e) {
    var str = '两数相等'
    if (this.num1 > this.num2) {
      str = '第1个数大'
    } else if (this.num1 < this.num2) {
      str = '第2个数大'
    }
    this.setData({
      result: str
    })
    // this.data.result = str // 这种方式无法改变页面中的{{result}}的值
  }
})


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
微信小程序(十)小程序缓存
微信小程序(十)小程序缓存
16 0
【微信小程序】小程序的宿主环境
文章目录 宿主环境 一、什么是宿主环境? 二、小程序的宿主环境 三、小程序宿主环境包含的内容 1.通信模型 通信的主体 小程序的通信模型 2.运行机制 小程序启动的过程 小程序页面渲染过程 3.组件 4.API
22 0
微信小程序——计算器案例
微信小程序——计算器案例
14 0
微信小程序实现分享至朋友圈的功能
微信小程序实现分享至朋友圈的功能
91 0
微信小程序开发(一)
今天将在小程序中添加底部tab功能切换,并新增关于我的功能。
115 0
微信小程序添加音乐组件
微信小程序添加音乐组件
44 0
微信小程序做移动商城笔记
这只是个人的一个记录,结果是由于SSL证书的费用而没有实现。 1.小程序的代码用的是API工厂提供的代码。修改里面的个性域名即可以使用。
1222 0
微信小程序把玩(三十四)Audio API
原文:微信小程序把玩(三十四)Audio API 没啥可值得太注意的地方 重要属性: 1. wx.getBackgroundAudioPlayerState(object) 获取播放状态 2.
919 0
微信小程序把玩(二十七)audio组件
原文:微信小程序把玩(二十七)audio组件 音频播放已经封装的很好!只需配合属性设置即可! (method和data配合使用) 主要属性: wxml 播放 暂停 调为1倍速 调为0.
965 0
微信小程序开发
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/bitree1/article/details/54945190  微信小程序开发步骤: 1.注册:https://mp.weixin.qq.com/  在微信公众平台注册一个账号。
745 0
+关注
流楚丶格念
csdn平台优质创作者,51cto TOP博主,360图书馆科技博主,燕山大学目前大三在读,日拱一卒,功不唐捐,加油!!!
1010
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载