当前位置: 首页 > news >正文

TDesign的input标签

目录

 一、 新建页面01-todolist

 二、 t-input标签、t-button标签

2.1 t-input标签

2.1.1 01-todolist.wxml页面

2.2 01-todolist.json页面

2.3  01-todolist.js页面

2.4  01-todolist.wxss页面 

2.2 t-button标签

示例1:bind:change

示例2:bind:tap、wx:for遍历

示例3:H5的自定义属性 

wx:if 和wx:else 用法示例


 一、 新建页面01-todolist

2. 

具体过程:

当前页面在pages/home/home路径下

3. 在home.js中看到data中定义的list变量是从同级目录'./data/index/'中import的

4. 基础模块导航栏对应的路径为同级目录下的base

4. 创建01-todolist页面,第一步哎base.js中添加代码如下:

5. 由于list遍历时查找的url路径是以下方式:

6. 只要在page路径下新建01-todolist文件夹和Page就能自动识别到对应的路径

 

 二、 t-input标签、t-button标签

2.1 t-input标签

2.1.1 01-todolist.wxml页面

 

<!--pages/01-todolist/01-todolist.wxml-->
<text>pages/01-todolist/01-todolist.wxml</text><view class="box">
<t-input type="text" bind:change="handlechange"/>
<t-button theme="primary" size="large" loading class="margin" >add</t-button>
</view>

注意change是当input输入框发生改变时触发

bind:change="handlechange" 

2.2 01-todolist.json页面

2.3  01-todolist.js页面

定义handlechange事件

  • e.detail.value获取的是input输入框中输入的值
  • this.setData不要错写成this.setDate
  • this.setData是设置data中定义的变量

2.4  01-todolist.wxss页面 

2.2 t-button标签

示例1:bind:change

点击Add按钮,清空输入框的值,并在页面累计显示


  •  bind:tap绑定事件

  • input标签的value是为了点击Add按钮,清空输入框的值,并在页面显示
  • 不要写成value={{inputValue}},不加双引号的形式
  • <t-input type="text" bind:change="handlechange" value="{{inputValue}}"/>

示例2:bind:tap、wx:for遍历

 点击Add按钮,清空输入框的值,并在页面累计显示,使用数组实现


  • 在this.setData({})中修改datalist
  • datalist:[...this.data.datalist,this.data.mychange]...this.data.datalist是展开数据

  • 不要写成this.datalist

  • wx:for遍历
  • {{item}} 取值
  • wx:key="{{index}}"写错了!应该不加{{}}=》wx:key="index"

示例3:H5的自定义属性 

 从这个位置开始,删除掉一个元素

js页面如下:

  • 实现的是点击删除,输出当前遍历的item的下标 
  • 重点是e.target,而不是e.detail.target
  • 如图可以看到自定义属性data-myid是在target的dataset中保存

 wxml页面如下:

 实现功能:点击删除

 

 

  • 重点是e.target.dataset.自定义属性名可以取值
  • 数组的splice(m,i)方法, 从下标为m的地方开始,删除掉i个元素 

wx:if 和wx:else 用法示例

 

  •  如果{{datalist.length>0}}的结果为true,就显示datalist中的数据
  • 如果为假,就显示“列表空空如也”

相关文章:

TDesign的input标签

目录 一、 新建页面01-todolist 二、 t-input标签、t-button标签 2.1 t-input标签 2.1.1 01-todolist.wxml页面 2.2 01-todolist.json页面 2.3 01-todolist.js页面 2.4 01-todolist.wxss页面 2.2 t-button标签 示例1&#xff1a;bind:change 示例2&#xff1a;bind:…...

从零开始学习 Java:简单易懂的入门指南之Map集合(二十三)

Map集合 1.Map集合1.1Map集合概述和特点1.2Map集合的基本功能1.3Map集合的获取功能1.4Map集合的遍历(方式1)1.5Map集合的遍历(方式2) 2.HashMap集合2.1HashMap集合概述和特点2.2HashMap集合应用案例 3.TreeMap集合3.1TreeMap集合概述和特点3.2TreeMap集合应用案例 1.Map集合 1…...

SpringBoot 拦截org.thymeleaf.exceptions.TemplateInputException异常

SpringBoot 拦截thymeleaf异常 org.thymeleaf.exceptions.TemplateInputException异常 org.thymeleaf.exceptions.TemplateProcessingE xception: Could not parse as each: "message : xxx " (template: “xxxx” - line xx, col xx) thymeleaf异常复现 你是故意的…...

Qt之随机数

介绍使用qsrand和qrand生成随机数。 生成随机数 生成随机数主要用到了函数qsrand和qrand&#xff0c;qsrand用来设置种子点&#xff0c;该种子为qrand生成随机数的起始值。如果不调用qsrand,那么qrand()就会自动调用qsrand(1)&#xff0c;即系统默认将1作为随机数的起始值。使…...

UWB学习——day2

UWB应用 基于上文UWB学习——day1中对UWB技术的相关优势介绍&#xff0c;UWB技术可广泛应用于以下场景。 WPAN&#xff08;无线个域网&#xff09; 基于其高精度&#xff08;亚厘米级&#xff09;、低功耗和高穿透性等特征&#xff0c;在以人为基础的个域网中应用广泛&#…...

使用 multiprocessing 多进程处理批量数据

示例代码 import multiprocessingdef process_data(data):# 这里是处理单个数据的过程return data * 2# 待处理的数据 data [1, 2, 3, 4, 5]def normal_func():# 普通处理方式result []for obj in data:result.append(process_data(obj)return resultdef parallel_func():# …...

React 与 TS 结合使用时组件传参总结

在学习 React 时&#xff0c;我们总会遇到在 TS 和 JS 之间切换来开发多个项目&#xff0c;而有时会忘记 TS 的语法&#xff0c;所以编写一下 React 结合 TS 开发时的一些总结知识点&#xff0c;以便后续回顾用。 向组件传递基础参数&#xff08;字符串、数字和布尔值&#xf…...

性能炸裂c++20协程+iocp/epoll,超轻量高性能异步库开发实战

前言&#xff1a; c20出来有一段时间了。其中一大功能就是终于支持协程了&#xff08;c作为行业大哥大级别的语言&#xff0c;居然到C20才开始支持协程&#xff0c;我也是无力吐槽了&#xff0c;让多少人等了多少年&#xff0c;等了多少青春&#xff09;但千呼万唤他终于还是来…...

自定义Dynamics 365实施和发布业务解决方案 - 4. 自动化业务流程

本章的主要重点是研究拟议应用程序的关键业务流程的自动化。每个组织每天都有自己独特的业务操作,这些操作是业务的关键部分。有些自动化的业务流程不需要用户交互,有些流程需要用户交互。此外,在某些业务流程中,某些用户操作完成,然后触发自动化流程来完成业务流程。 Dy…...

Lua03——开发环境搭建

1 安装开发插件 在 idea 或 vscode 中安装 lua 的开发插件 EmmyLua 2 创建工程 在 idea 中创建一个新的工程 工程的类型选择 lua 输入工程名及目标目录 在工程结构的SDK中设置lua在本地安装目录 在工程结构的modules中选择 lua 3 编写第一个lua程序 在工程下添加程序包&#…...

Redis 非关系型数据库 配置与优化

关系数据库与非关系型数据库 关系型数据库 关系型数据库是一个结构化的数据库&#xff0c;创建在关系模型&#xff08;二维表格模型&#xff09;基础上&#xff0c;一般面向于记录。 SQL 语句&#xff08;标准数据查询语言&#xff09;就是一种基于关系型数据库的语言&#x…...

docker笔记8:Docker网络

1.是什么 1.1 docker不启动&#xff0c;默认网络情况 ens33 lo virbr0 在CentOS7的安装过程中如果有选择相关虚拟化的的服务安装系统后&#xff0c;启动网卡时会发现有一个以网桥连接的私网地址的virbr0网卡(virbr0网卡&#xff1a;它还有一个固定的默认IP地址192.168.122…...

C# 共享项目的应用

概述 共享项目也可以称为共享资产项目,它允许在多个目标项目之间共享的代码。 它支持编译器指令,可以有条件地包含特定于平台的代码,以便编译为引用共享项目的项目的子集。 还有 IDE 支持,可帮助管理编译器指令并直观显示代码在每个应用程序中的外观。 什么是共享项目? …...

Linux之基于HTTPS的静态网站

目录 Linux之基于HTTPS的静态网站 定义 SSL协议 使用Apachemod_ssl组件的加密认证网站 mod_ssl模组 安装 配置文件 ssl配置文件的主要参数 案例 案例1 --- 搭建HTTPSSL的加密认证的web服务器 案例2 --- 组建多个子目录的网站www.joker.com&#xff0c;该网站下有2个子…...

ChatGPT在机器人护理和老年人支持中的潜在角色如何?

机器人在护理和老年人支持领域有着巨大的潜力&#xff0c;可以提供多种服务和支持&#xff0c;改善老年人的生活质量&#xff0c;并减轻护理工作者和家庭成员的负担。在这篇文章中&#xff0c;我将探讨机器人在这一领域的潜在角色&#xff0c;包括其应用、优势和挑战。 ## 1. …...

LeetCode:261. 以图判树 - Python

261. 以图判树 问题描述&#xff1a; 给定从 0 到 n-1 标号的 n 个结点&#xff0c;和一个无向边列表&#xff08;每条边以结点对来表示&#xff09;&#xff0c;请编写一个函数用来判断这些边是否能够形成一个合法有效的树结构。 示例 1&#xff1a; 输入&#xff1a;n 5, …...

Linux目录结构和远程使用

目录名作用根目录 ‘/’文件系统结构的起始点/root系统管理员的工作目录/home普通用户工作目录/bin存放二进制可执行文件&#xff0c;存放最经常使用的命令/sbin系统管理员使用的系统管理程序/boot启动linux时使用的一些核心文件/dev设备文件&#xff0c;包括块设备和字符设备/…...

淘宝销量展示方式变更背后的逻辑

淘宝销量展示方式发生了调整&#xff0c;平台于8月16日将商品详情销量展示表达由【月销**件】全部换成展示【已售**件】&#xff0c;将30天销量改成了近365天销量。 【已售**件】统计口径&#xff1a;统计近365天支付的商品件数&#xff0c;数据更新请关注24-48小时。其中涉及销…...

Bytebase 和 GitLab 签署 Technology Partner 技术合作伙伴协议

Bytebase 和 GitLab 签署技术合作伙伴协议&#xff0c;携手为开发者提供流畅的数据库协作开发和管理体验。 GitLab 是世界领先的开源 AI 驱动 DevSecOps 平台&#xff0c;旨在帮助开发者团队更好协作、更高效交付软件。Bytebase 是一款为 DevOps 团队准备的数据库 CI/CD 工具&a…...

杭州高职画室哪家好?如何选择高职画室?高职美术学习选哪家画室?

随着越来越多的画室开始涉足高职美术培训&#xff0c;根据杭州高职画室的美术学生及其家长所知&#xff0c;由于普通高中和高职联考之间存在巨大差异&#xff0c;因此许多普通高中的画室的高职班并未取得太大的成功。因此&#xff0c;小编为正在寻找画室的你提供介绍&#xff1…...

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

三维GIS开发cesium智慧地铁教程(5)Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

Angular微前端架构:Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...