微信小程序案例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.rhkb.cn/news/184333.html

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

相关文章

DocTemplateTool - 可根据模板生成word或pdf文件的工具

你是否经常遇到这样的场景&#xff1a;产品运营有着大量的报告需求&#xff0c;或者给客户领导展现每周的运营报告&#xff1f;这些文档类的任务可以交给运营同事&#xff0c;他们负责文档排版和样式&#xff0c;你作为开发人员你只需要提供数据源&#xff0c;和一个映射表&…

数据结构(c语言版) 栈

顺序栈 要求&#xff1a;实现顺序栈的入栈&#xff0c;出栈&#xff0c;显示栈 代码 #include <stdio.h> #define MAXSIZE 100struct liststack{int data[MAXSIZE];int top; };//初始化栈 void init(struct liststack * LS){LS->top -1; }//入栈操作 void instack…

Web3.0的测试题

任务&#xff1a; 在前端开发一个查询UI&#xff0c;查询当前用户账户的ETH余额和指定ERC20合约中的余额 目标&#xff1a; UI框架指定使用 MUI (https://mui.com)需要查询到当前账户的ETH余额并展示在UI界面上需要输入ERC20合约地址后&#xff0c;查询到到当前账户在此ERC20…

简述SVM

概述 SVM&#xff0c;即支持向量机&#xff08;Support Vector Machine&#xff09;&#xff0c;是一种常见的监督学习算法&#xff0c;用于分类和回归问题。它是一种基于统计学习理论和结构风险最小化原则的机器学习方法。 SVM的主要思想是在特征空间中找到一个最优的超平面…

怎么将pdf转换成word?

怎么将pdf转换成word&#xff1f;将pdf文件转换成word是一件非常重要的转换技能&#xff0c;将pdf转换成word可以解决非常多的问题&#xff0c;总结起来主要有以下这些&#xff1a;编辑文本&#xff1a;① PDF文件通常是不可编辑的&#xff0c;而将其转换为Word格式后&#xff…

微服务使用指南

微服务使用指南 1.初识微服务 微服务可以认为是一种分布式架构的解决方案&#xff0c;提供服务的独立性和完整性&#xff0c;做到服务的高内聚、低耦合。 目前服务架构主要包含&#xff1a;单体架构和分布式架构。 1.1 单体架构 单体架构&#xff1a;把所有业务功能模块都…

小程序day04

目标 自定义组件 创建组件 引用组件 局部引用 全局引用 组件的函数定义到metods节点中&#xff0c;梦回vue2. 样式 数据&#xff0c;方法&#xff0c;属性 下划线开头的称为自定义方法&#xff0c;非下划线开头的都是事件处理函数。 神特么&#xff0c;this.datathis.pro…

Databend 开源周报第 118 期

Databend 是一款现代云数仓。专为弹性和高效设计&#xff0c;为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务&#xff1a;https://app.databend.cn 。 Whats On In Databend 探索 Databend 本周新进展&#xff0c;遇到更贴近你心意的 Databend 。 MERGE INTO 现已…

Elasticsearch内存分析

文章目录 Elasticsearch JVM内存由哪些部分组成Indexing BufferNode Query CacheShard Request CacheField Data CacheSegments Cache查询 非堆内存内存压力mat分析es的jvm缓存监控 Elasticsearch JVM内存由哪些部分组成 官方建议Elasticsearch设置堆内存为32G&#xff0c;因为…

Chrome 插件开发 V3版本 跨域处理

插件构成 chrome 插件通常由以下几部分组成&#xff1a; manifest.json&#xff1a;相当于插件的 meta 信息&#xff0c;包含插件的名称、版本号、图标、脚本文件名称等&#xff0c;这个文件是每个插件都必须提供的&#xff0c;其他几部分都是可选的。 background script&…

【大数据】NiFi 中的重要术语

NiFi 中的重要术语 1.Flow Controller2.Processor3.Connection4.Controller Service5.Process Group6.FlowFile 那些一个个黑匣子称为 Processor&#xff0c;它们通过称为 Connection 的队列交换名为 FlowFile 的信息块。最后&#xff0c;FlowFile Controller 负责管理这些组件…

服务器代码上云过程

一、前置要求 1.1 服务器端代码 需要有服务器端的代码&#xff0c;不然在云服务器&#xff08;云主机&#xff09;上运行啥嘞 1.2 云服务器&#xff08;云主机&#xff09; 需要有云服务器&#xff0c;因为云服务器会有公网IP&#xff0c;可以在任意地方进行访问。云服务器…

Visual Studio Code将中文写入变量时,中文老是乱码问题

对于这个问题&#xff0c;我也是弄了很久才知道&#xff0c;编码格式的问题 在此之前我们要先下载个插件 照这以上步骤&#xff0c;最后按F6运行即可&#xff0c;按F6是利用我们刚刚下载的插件进行编译&#xff0c;唯一有一点不好就是&#xff0c;用这种插件运行的话&#xff…

App备案-iOS云管理式证书 Distribution Managed 公钥及证书SHA-1指纹的获取方法

根据近日工业和信息化部发布的《工业和信息化部关于开展移动互联网应用程序备案工作的通知》&#xff0c;相信不少要进行IOS平台App备案的朋友遇到了一个问题&#xff0c;就是apple不提供云管理式证书的下载&#xff0c;也就无法获取公钥及证书SHA-1指纹。 已经上架的应用不想重…

java项目之个人健康信息管理(ssm+jsp)

项目简介 个人健康信息管理实现了以下功能&#xff1a; 管理员&#xff1a;首页、个人中心、用户管理、医师管理、饮食记录管理、运动记录管理、健康信息管理、健康评估管理、健康知识管理、系统管理。用户&#xff1a;首页、个人中心、饮食记录管理、运动记录管理、健康信息…

京东数据分析(京东销量):2023年9月京东投影机行业品牌销售排行榜

鲸参谋监测的京东平台9月份投影机市场销售数据已出炉&#xff01; 根据鲸参谋电商数据分析平台的相关数据数据显示&#xff0c;9月份&#xff0c;京东平台投影机的销量为13万&#xff0c;环比下滑约17%&#xff0c;同比下滑约25%&#xff1b;销售额将近2.6亿&#xff0c;环比下…

助力工业数字化!TDengine 与恩菲 MIM+ 工业互联网平台实现兼容性互认

在云计算、物联网、5G等新兴技术快速发展的当下&#xff0c;制造企业想要运用新兴技术实现数字化转型&#xff0c;工业互联网平台的应用和打造是非常关键的转型要素。在工业互联网平台的发展中&#xff0c;数据处理上存在的问题一直都是令企业所头疼的&#xff0c;越来越多的案…

Vue3:自定义图标选择器(包含 SVG 图标封装)

文章目录 一、准备工作&#xff08;在 Vue3 中使用 SVG&#xff09;二、封装 SVG三、封装图标选择器四、Demo 效果预览&#xff1a; 一、准备工作&#xff08;在 Vue3 中使用 SVG&#xff09; 本文参考&#xff1a;https://blog.csdn.net/houtengyang/article/details/1290431…

后端工程化 | SpringBoot 知识点

文章目录 [SpringBoot] 后端工程化1 需求2 开发流程3 RequestController 类&#xff08;操作类&#xff09;3.1 简单参数&#xff08;形参名和请求参数名一致&#xff09;3.2 简单参数&#xff08;形参名和请求参数名不一致&#xff09;3.3 复杂实体参数3.4 数组参数3.5 集合参…

chrome安装vue devtools

不能访问应用商店 如果可以访问应用商店可以往下看 插件源代码 选择shell-chrome&#xff0c;这是官方的插件源码 下载源代码打包 参考教程 点击扩展按钮->管理扩展程序->打开开发者模式->把crx文件拖拽进去即可 可以访问chrome应用商店 插件地址 官方文档地址 选…