微信小程序案例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;
}

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Azure 机器学习 - 设置 AutoML 训练时序预测模型

目录 一、环境准备二、训练和验证数据三、配置试验支持的模型配置设置特征化步骤自定义特征化 四、可选配置频率和目标数据聚合启用深度学习目标滚动窗口聚合短时序处理非稳定时序检测和处理 五、运行试验六、用最佳模型进行预测用滚动预测评估模型精度预测未来 七、大规模预测…

《深入立即计算机系统》书籍学习笔记 - 第二课 - 位,字节和整型

Lecture 02 Bits,Bytes, and Integer 位&#xff0c;字节和整型 文章目录 Lecture 02 Bits,Bytes, and Integer 位&#xff0c;字节和整型Byte 字节位操作布尔代数集合的表现形式和操作C语言的逻辑操作 位移操作整型数值范围无符号与有符号数值无符号与有符号在C中 拓展和截断拓…

安防监控EasyCVR视频汇聚平台使用海康SDK播放时,画面播放缓慢该如何解决?

视频云存储/安防监控EasyCVR视频汇聚平台基于云边端智能协同&#xff0c;支持海量视频的轻量化接入与汇聚、转码与处理、全网智能分发、视频集中存储等。安防视频平台EasyCVR拓展性强&#xff0c;视频能力丰富&#xff0c;具体可实现视频监控直播、视频轮播、视频录像、云存储、…

物业报修管理软件哪个好?如何提升物业管理和维修服务质量?

在当前的数字化时代&#xff0c;物业管理软件在物业行业中的作用日益凸显。它不仅能够有效提升管理效率&#xff0c;还能够优化服务质量&#xff0c;拓展收入来源&#xff0c;推动智慧物业的全面实现。本文将深入探讨“的修”报修管理软件如何通过其独特的功能和优势&#xff0…

【机器学习】Kmeans聚类算法

一、聚类简介 Clustering (聚类)是常见的unsupervised learning (无监督学习)方法&#xff0c;简单地说就是把相似的数据样本分到一组&#xff08;簇&#xff09;&#xff0c;聚类的过程&#xff0c;我们并不清楚某一类是什么&#xff08;通常无标签信息&#xff09;&#xff0…

《009.Springboot+vue之进销存管理系统》

《009.Springbootvue之进销存管理系统》 项目简介 [1]本系统涉及到的技术主要如下&#xff1a; 推荐环境配置&#xff1a;DEA jdk1.8 Maven MySQL 前后端分离; 后台&#xff1a;SpringBootMybatisredis; 前台&#xff1a;vueElementUI; [2]功能模块展示&#xff1a; 1.用户管…

AC修炼计划(AtCoder Regular Contest 163)

传送门&#xff1a;AtCoder Regular Contest 163 - AtCoder 第一题我们只需要将字符串分成两段&#xff0c;如果存在前面一段比后面一段大就成立。 #include<bits/stdc.h> #define int long long using namespace std; typedef long long ll; typedef pair<int,int&g…

程序设计:控制台输出二叉树 二叉树的形象显示

本文指导你编写一个输出到字符控制台的形象的二叉树展示。 目录 一般的Tree显示方式 理想的显示方式 实现方法 计算显示位置 输出数据 计算显示位置的代码 输出数据的代码 一般的Tree显示方式 编写二叉树算法时调试是很头疼的&#xff0c;如何显示成一目了然的树结构呢…

Flink SQL DataGen Connector 示例

Flink SQL DataGen Connector 示例 1、概述 使用 Flink SQL DataGen Connector&#xff0c;可以快速地生成符合规则的测试数据&#xff0c;可以在不依赖真实数据的情况下进行开发和测试。 2、使用示例 创建一个名为 “users” 的表&#xff0c;包含 6 个字段&#xff1a;id…

PHP分类信息网站源码系统 电脑+手机+微信端三合一 带完整前后端部署教程

大家好啊&#xff01;今天源码小编来给大家分享一款PHP分类信息网站类源码系统。这款源码系统是一套专业的信息发布类网站综合管理系统&#xff0c;适合各类地方信息和行业分类站点建站。随着这几年我们国家网民爆炸式的增 长&#xff0c;网络信息也随之越来越庞大&#xff0c;…

为什么亚马逊的轻量应用服务器这么受欢迎 | 个人体验 | 优势所在

文章目录 &#x1f33a;前言⭐什么是轻量应用服务器&#x1f6f8;特点 &#x1f384;亚马逊轻量应用服务器体验如何&#x1f339;亚马逊轻量应用服务器的优势 &#x1f33a;前言 作为一为开发者&#xff0c;我们要开发部署一个自己的网站&#xff0c;要选择一个性能好的服务器…

算法训练 第六周

一、用栈实现队列 本题要求我们使用栈这个数据结构来模拟实现队列的各种操作&#xff0c;我们的具体思路是使用两个栈&#xff0c;将一个栈当作输入栈&#xff0c;用于压入 push传入的数据&#xff1b;另一个栈当作输出栈&#xff0c;用于 pop和 peek 操作。每次 pop 或 peek 时…

大数据学习之Spark性能优化

文章目录 Spark三种任务提交模式宽依赖和窄依赖StageSpark Job的三种提交模式 Shuffle机制分析未优化的Hash Based Shuffle优化后的Hash Based ShuffleSort-Based Shuffle Spark之checkpointcheckpoint概述checkpoint与持久化的区别checkPoint的使用checkpoint源码分析 Spark程…

实现前后端分离开发:构建现代化Web应用

文章目录 什么是前后端分离开发&#xff1f;为什么要采用前后端分离开发&#xff1f;前后端分离的最佳实践1. 定义API2. 使用RESTful风格3. 选择适当的前端框架4. 选择合适的后端技术5. 数据交互格式6. 前端路由7. 自动化构建和部署8. 跨域问题 示例&#xff1a;前后端分离开发…

代码随想录算法训练营第四十七天 | LeetCode 198. 打家劫舍、213. 打家劫舍 II、337. 打家劫舍 III

代码随想录算法训练营第四十七天 | LeetCode 198. 打家劫舍、213. 打家劫舍 II、337. 打家劫舍 III 文章链接&#xff1a;打家劫舍 打家劫舍 II 打家劫舍 III 视频链接&#xff1a;打家劫舍 打家劫舍 II 打家劫舍 III 1. LeetCode 198. 打家劫舍 1.1 思路 我们要去偷钱&#…

【论文阅读】Generating Radiology Reports via Memory-driven Transformer (EMNLP 2020)

资料链接 论文原文&#xff1a;https://arxiv.org/pdf/2010.16056v2.pdf 代码链接&#xff08;含数据集&#xff09;&#xff1a;https://github.com/cuhksz-nlp/R2Gen/ 背景与动机 这篇文章的标题是“Generating Radiology Reports via Memory-driven Transformer”&#xf…

Leetcode—2586.统计范围内的元音字符串数【简单】

2023每日刷题&#xff08;二十二&#xff09; Leetcode—2586.统计范围内的元音字符串数 实现代码 class Solution { public:int vowelStrings(vector<string>& words, int left, int right) {int ans 0;for(int i left; i < right; i) {string s words[i];i…

解决:ImportError: cannot import name ‘get_config‘

解决&#xff1a;ImportError: cannot import name ‘get_config’ 背景 今天使用Conda构建项目运行环境的时候报错&#xff1a;ImportError: cannot import name ‘get_config’ ##报错问题 from keras.callbacks import LearningRateScheduler, ModelCheckpointFile "D…

GreenPlum简介

简介 Greenplum是一家总部位于**美国加利福尼亚州&#xff0c;为全球大型企业用户提供新型企业级数据仓库(EDW)、企业级数据云(EDC)和商务智能(BI)提供解决方案和咨询服务的公司&#xff0c;在全球已有&#xff1a;纳斯达克&#xff0c;纽约证券交易所&#xff0c;Skype. FOX&…

idea 模板参数注释 {@link}

1. 新增组 2. 设置方法注释及变量 增加模板文本 ** * $param$ * return {link $return$} */3. 设置变量表达式 勾选跳过param 参数表达式 groovyScript("def result ;def params \"${_1}\".replaceAll([\\\\[|\\\\]|\\\\s], ).split(,).toList();def param…