微信小程序案例3-1 比较数字

文章目录

  • 一、运行效果
  • 二、知识储备
    • (一)Page()函数
    • (二)数据绑定
    • (三)事件绑定
    • (四)事件对象
    • (五)this关键字
    • (六)setData()方法
    • (七)条件渲染
    • (八)\<block>标签
    • (九)hidden属性
  • 三、实现步骤
    • (一)准备工作
    • (二)实现页面结构
    • (三)实现页面样式
    • (四)获取并保存用户输入的数字
    • (五)判断数字大小并显示结果

一、运行效果

在这里插入图片描述

二、知识储备

(一)Page()函数

在这里插入图片描述

(二)数据绑定

在这里插入图片描述

(三)事件绑定

在这里插入图片描述

(四)事件对象

在这里插入图片描述

(五)this关键字

在这里插入图片描述

(六)setData()方法

在这里插入图片描述

(七)条件渲染

在这里插入图片描述

(八)<block>标签

在这里插入图片描述

(九)hidden属性

在这里插入图片描述

三、实现步骤

(一)准备工作

  • 创建微信小程序 - 比较数字,不采用模板
    在这里插入图片描述
  • 单击【确定】按钮
    在这里插入图片描述
  • 清空页面结构
    在这里插入图片描述
  • 初始化页面样式
    在这里插入图片描述
  • 配置窗口表现
    在这里插入图片描述

(二)实现页面结构

  • pages/index/index.wxml文件里实现页面结构
    在这里插入图片描述
<!--index.wxml-->
<view class="input"><text>请输入第1个数字:</text><input type="number" />
</view>
<view class = "input"><text>请输入第2个数字:</text><input type="number" />
</view>
<button class='btn'>比较</button>
<view class="result"><text>比较结果:</text>
</view>
  • 查看预览效果
    在这里插入图片描述

(三)实现页面样式

  • 为了页面好看,编写页面样式文件pages/index/index.wxss
    在这里插入图片描述
/**index.wxss**/
page {height: 100vh;display: flex;flex-direction: column;padding: 20rpx;
}
.input {height: 6vh;width: 100%;padding: 3vw;display: flex;    
}
.input > input {background-color: antiquewhite;width: 45vw;border: 1px solid #aaa
}
.btn {background-color: #1AAD19;color: white;font-size: 15px;
}
.result {margin-top: 2vh;padding: 3vw;
}

(四)获取并保存用户输入的数字

(五)判断数字大小并显示结果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/132174.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【排序算法】 快速排序(快排)!图解+实现详解!

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; 算法—排序篇 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1;前言&#x1f324;️快速排序的概念☁️快速排序的由来☁️快速排序的思想☁️快速排序的实…

开源 Wiki 软件 wiki.js

wiki.js简介 最强大、 可扩展的开源Wiki 软件。使用 Wiki.js 美观直观的界面让编写文档成为一种乐趣&#xff01;根据 AGPL-v3 许可证发布。 官方网站&#xff1a;https://js.wiki/ 项目地址&#xff1a;https://github.com/requarks/wiki 主要特性&#xff1a; 随处安装&a…

【Vue.js】Vue3全局配置Axios并解决跨域请求问题

系列文章目录 文章目录 系列文章目录背景一、部署Axios1. npm 安装 axios2. 创建 request.js&#xff0c;创建axios实例3. 在main.js中全局注册axios4. 在页面中使用axios 二、后端解决跨域请求问题方法一 解决单Contoller跨域访问方法二 全局解决跨域问题 背景 对于前后端分离…

Excel·VBA工作表导出为图片

《Excel转图片别再截图啦&#xff01;用这4个方法&#xff0c;高清且无损&#xff01;》&#xff0c;excel转为图片一般方法较为简单&#xff0c;那么能否使用vba将excel转为图片 选中区域导出为图片 zoom设置为2&#xff0c;导出图片较为清晰 Sub 选中区域导出为图片()Dim …

Linux 内核中根据文件inode号获取其对应的struct inode

文章目录 前言一、简介二、LKM demo2.1 iget_locked2.2 LKM demo2.3 ext4_iget 前言 文件inode号和struct inode结构体请参考&#xff1a; Linux文件路径&#xff0c;目录项&#xff0c;inode号关联 Linux文件系统 struct inode 结构体解析 一、简介 在Linux中&#xff0c;每…

web3 React dapp中编写balance组件从redux取出并展示用户资产

好啊 上文WEB3 在 React搭建的Dapp中通过redux全局获取并存储用户ETH与自定义token与交易所存储数量中 我们拿到了用户的一个本身 和 交易所token数量 并放进了redux中做了一个全局管理 然后 我们继续 先 起来ganache的一个模拟环境 ganache -d然后 我们启动自己的项目 顺手发…

Spring底层原理学习笔记--第二讲--(BeanFactory实现与ApplicaitonContext实现)

BeanFactory实现 package com.lucifer.itheima.a02;import lombok.extern.slf4j.Slf4j; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.config.BeanFactoryPostProcessor; import org.springframework.beans.fac…

聚观早报 |小米CarWith启动兼容测试;「天工」大模型开放

【聚观365】11月6日消息 小米CarWith启动兼容测试 「天工」大模型开放 邮政快递揽收超20亿件 华为Mate 60 Pro开启预约申购 VERTU持续探索前沿科技 小米CarWith启动兼容测试 小米CarWith是打造“人车家生态”中不可或缺的一环&#xff0c;在最新升级的2.0版本中&#xff…

Jupyter notebook如何加载torch环境

默认你已经安装了anaconda 和 pytorch 环境。 1&#xff0c;必须要以管理员身份打开 Anaconda prompt终端&#xff0c; 2&#xff0c;进入pytorch环境中&#xff1a; conda activate pytorch_393&#xff0c;安装必要插件&#xff1a; &#xff08;1&#xff09;conda inst…

项目管理之如何识别并应对项目风险

项目风险管理是项目管理中不可忽视的环节&#xff0c;如何识别并应对项目的风险对于项目的成功实施至关重要。本文将介绍风险管理的流程、风险分解结构、定性及定量风险评估方法&#xff0c;以及消极和积极的风险应对策略&#xff0c;旨在帮助读者更好地理解和应对项目风险。 …

win10端口转发

1. 写在前面 核心命令 netsh&#xff0c; 此工具在win10下&#xff0c;支持大量网络相关配置&#xff0c;可参考&#xff1a;netsh官方文档 2. 命令行批模式 在CMD或PowerShell中&#xff0c;执行以下命令&#xff0c; 可能会提示需要管理员权限执行 # 添加转发规则&#x…

使用new_zeros和zeros_like分别返回与输入相同尺寸/类型/device的tensor和ndarray

torch.Tensor.new_zeros(size, dtypeNone, deviceNone) 返回尺寸为size的全为0的tensor&#xff0c;默认&#xff0c;返回的tensor与该tensor具有相同的dtype和device&#xff0c;可以用于在模型训练过程中创建新tensor&#xff0c;并保证该tensor在对应的device上 1&#xff0…

华为政企闪存存储产品集

产品类型产品型号产品说明 maintainProductOceanStor Dorado 2000 SAS 128GB华为OceanStor Dorado 2000是一款简单、可靠、绿色的全闪存存储系统&#xff0c;极简部署、智能运维、轻量便捷&#xff0c;功能齐全&#xff0c;广泛适用于虚拟化、数据库、办公自动化、分支机构等…

Gorm 中的迁移指南

探索使用 GORM 在 Go 中进行数据库迁移和模式更改的世界 在应用程序开发的不断变化的景观中&#xff0c;数据库模式更改是不可避免的。GORM&#xff0c;强大的 Go 对象关系映射库&#xff0c;通过迁移提供了一种无缝的解决方案来管理这些变化。本文将作为您全面的指南&#xf…

最新知识付费变现小程序源码/独立后台知识付费小程序源码/修复登录接口

最新知识付费变现小程序源码&#xff0c;独立后台知识付费小程序源码&#xff0c;最新版修复登录接口。 主要功能 会员系统&#xff0c;用户登录/注册购买记录 收藏记录 基本设置 后台控制导航颜色 字体颜色 标题等设置 流量主广告开关小程序广告显示隐藏 广告主审核过审核…

aardio使用任意版本Python的用法

aardio中调用python的方法有两种,py3 和 process.python模块 py3模块:如果经常要拿到python返回的值或从aardio中传数据给python去处理,aardio和python的交互比较多的话,可以考虑使用py3模块,缺点是:py3模块使用起来比较麻烦些,尤其是在异步多线程操作的话,中间需要学习…

Openssl生成证书-nginx使用ssl

Openssl生成证书并用nginx使用 安装openssl yum install openssl -y创库目录存放证书 mkdir /etc/nginx/cert cd /etc/nginx/cert配置本地解析 cat >>/etc/hosts << EOF 10.10.10.21 kubernetes-master.com EOF10.10.10.21 主机ip、 kubernetes-master.com 本…

使用 Python 进行自然语言处理第 4 部分:文本表示

一、说明 本文是在 2023 年 3 月为 WomenWhoCode 数据科学跟踪活动发表的系列文章中。早期的文章位于&#xff1a;第 1 部分&#xff08;涵盖 NLP 简介&#xff09;、第 2 部分&#xff08;涵盖 NLTK 和 SpaCy 库&#xff09;、第 2 部分&#xff08;涵盖NLTK和SpaCy库&#xf…

什么是数据库迁移

在企业应用程序的上下文中&#xff0c;数据库迁移意味着将数据从一个平台移动到另一个平台。您可能想要迁移到不同平台的原因有很多。例如&#xff0c;一家公司可能决定通过迁移到基于云的数据库来节省资金。或者公司可能会发现某些特定的数据库软件具有对其业务需求至关重要的…

spring-boot中实现分片上传文件

一、上传文件基本实现 1、前端效果图展示&#xff0c;这里使用element-ui plus来展示样式效果 2、基础代码如下 <template><div><el-uploadref"uploadRef"class"upload-demo":limit"1":on-change"handleExceed":auto-…