TDesign的input标签

news2024/10/11 0:25:33

目录

 一、 新建页面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:

示例2 :


 一、 新建页面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:

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


  •  bind:tap绑定事件

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

示例2 :

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


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

  • 不要写成this.datalist

  • wx:for遍历
  • {{item}} 取值

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

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

相关文章

【LeetCode题目详解】第九章 动态规划part08 139.单词拆分 (day46补)

本文章代码以c为例&#xff01; 一、力扣第139题&#xff1a;单词拆分 题目&#xff1a; 给你一个字符串 s 和一个字符串列表 wordDict 作为字典。请你判断是否可以利用字典中出现的单词拼接出 s 。 注意&#xff1a;不要求字典中出现的单词全部都使用&#xff0c;并且字典…

linux系统中rootfs根文件系统制作及挂载基本操作

​今天给大家介绍一下rootfs根文件系统制作和挂载方式&#xff0c;希望这篇文章对大家有所帮助。 本章主要是对rootfs根文件系统制作和挂载方式进行详细讲解。 Linux“三巨头”已经完成了2个了&#xff0c;就剩最后一个 rootfs(根文件系统)了&#xff0c;本章我们就来学习一下…

日常开发小汇总(4)空对象创造

创建空对象的目的其实是想要一个干净的对象&#xff0c;最直接的方式是将对象的隐式原型干掉&#xff0c;如 下图就会得到一个干净的对象&#xff0c;但是这种方式不推荐&#xff0c;不要直接操作__proto__ 方式一 Object.create(null) 方法二 Object.setPrototypeOf(对象&a…

SpringMVC文件上传、文件下载多文件上传及jrebel的使用与配置

一.文件上传 1.导入依赖 <dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.3</version> </dependency> 2.配置文件上传解析器 在spring-mvc.xml文件中添加文件…

掌握API数据检索:过滤和排序的综合指南

API可以返回大量的数据&#xff0c;这使得开发人员很难只检索他们需要的信息。这就是API的过滤和排序功能的用武之地。 过滤和排序是API设计的两个基本功能&#xff0c;它们允许开发人员有效地从API检索特定的数据。过滤使开发人员能够通过指定返回的数据必须满足的标准来缩小A…

【用unity实现100个游戏之11】复刻经典消消乐游戏

文章目录 前言开始项目开始一、方块网格生成二、方块交换三、添加交换的动画效果四、水平消除检测五、垂直消除检测六、完善删除功能七、效果优化&#xff08;移动方块后再进行消除检测&#xff09;八、方块下落十、方块填充十一、后续 源码参考完结 前言 欢迎来到经典消消乐游…

第13节-PhotoShop基础课程-裁剪工具

文章目录 前言1.裁剪工具1.基本操作 Alt Shift2.拉直3.内容识别 自动填充 2.透视裁剪工具3.切片工具-长图分成多个4.切片选择工具5. 存储为一张一张 前言 1.裁剪工具 1.基本操作 Alt Shift 2.拉直 可以矫正图片 3.内容识别 自动填充 2.透视裁剪工具 可以拉正图片 3.切片工具-…

SpringAOP的实现机制(底层原理)、应用场景等详解

SpringAOP的实现机制&#xff08;底层原理&#xff09;应用场景等详解 ​ Spring框架是Java开发中最流行的应用程序框架之一。它提供了广泛的功能&#xff0c;其中之一就是面向切面编程&#xff08;AOP&#xff09;。Spring AOP允许我们将关注点&#xff08;例如日志记录、事务…

微信小程序源码

1&#xff1a;仿豆瓣电影微信小程序 https://github.com/zce/weapp-demo 2&#xff1a;微信小程序移动端商城 https://github.com/liuxuanqiang/wechat-weapp-mall 3&#xff1a;Gank微信小程序 https://github.com/lypeer/wechat-weapp-gank 4&#xff1a;微信小程序高仿QQ…

【小笔记】当一个算法性能不满意,可能是这几方面的原因

【学而不思则罔&#xff0c;思而不学则殆】 2023.9.9 原因一&#xff1a;数据质量有问题 数据决定了算法的上限&#xff0c;在大模型时代&#xff0c;这句话仍然管用&#xff08;比如open AI对数据的标注要求就非常高&#xff09;数据的问题主要有这几方面&#xff1a; 1. …

CSDN每日一练 |『括号上色』『严查枪火』『数组排序』2023-09-09

CSDN每日一练 |『括号上色』『严查枪火』『数组排序』2023-09-09 一、题目名称:括号上色二、题目名称:严查枪火三、题目名称:数组排序一、题目名称:括号上色 时间限制:1000ms内存限制:256M 题目描述: 小艺酱又得到了一堆括号。 括号是严格匹配的。 现在给括号进行上色。…

Springboot整合JWT完成验证登录

目录 一、引入依赖二、JwtUtil 代码解读三、LoginController 代码解读四、整体代码五、结果展示 一、引入依赖 <dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt</artifactId><version>0.9.1</version></depende…

趣解接口隔离原则之《做个Rapper咋这么难?》

〇、小故事 不知道大家是否看过这样一个短视频——“姐姐去找她的弟弟&#xff0c;因为她的弟弟想要当rapper而荒废了学业&#xff0c;姐姐多番劝导也没有用&#xff0c;最后一怒一下&#xff0c;把弟弟的rapper发型剃了。没有了帅气的rapper发型&#xff0c;弟弟也放弃了当ra…

数据结构与算法-选择冒泡快排计数

一&#xff1a;选择排序 场景&#xff1a;找出一个班上身高最高的人你会怎么找&#xff1f;A B C D A B 选择排序的思路和插入排序非常相似&#xff0c;也分已排序和未排序区间。但选择排序每次会从未排序区间中找到最小的元素&#xff0c;将其放到已排序区间的末尾。但是不像插…

SetWindowDisplayAffinity 函数设置窗体透明

#define WDA_NONE 0x00000000 #define WDA_MONITOR 0x00000001 #define WDA_EXCLUDEFROMCAPTURE 0x00000011 c#调用示例 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.L…

从金融史、司法体系与技术周期来看,RWA的万亿叙事经不起推敲?

加密市场走向低迷&#xff0c;但RWA&#xff08;Real World Assets&#xff0c;真实世界资产&#xff09;概念却不断升温&#xff0c;成为这个行业里为数不多各方都承认的宏大叙述&#xff0c;吸引了高盛、花旗等传统机构的兴趣。不过从金融史、司法体系与区块链技术周期等方面…

Linux基本指令及其使用

前言&#xff1a;前面我们学习了Linux环境的简单配置和XShell7的安装&#xff0c;并将云服务器部署连接到XShell本地来使用&#xff0c;今天&#xff0c;我们就一起来学习一些Linux的基本指令及其使用&#xff0c;为后续的Linux的学习打基础&#xff0c;下面&#xff0c;马上开…

openGauss学习笔记-64 openGauss 数据库管理-创建和管理表空间

文章目录 openGauss学习笔记-64 openGauss 数据库管理-创建和管理表空间64.1 背景信息64.2 注意事项64.3 操作步骤64.3.1 创建表空间64.3.2 在表空间中创建对象64.3.3 查询表空间64.3.4 查询表空间使用率64.3.5 修改表空间64.3.6 删除表空间 openGauss学习笔记-64 openGauss 数…

vite+vue3项目中集成ESLint与prettier

1. 集成eslint 1.1 安装eslint npm add -D eslint1.2 初始化ESLint配置 npx eslint --init1.3 配置初始化选择 我的选择如下&#xff1a; 安装完成后&#xff08;根目录会生成.eslintrc.js文件&#xff09; 这个配置文件是默认生成的 1.4 eslint不生效解决方案 检查vscode…

DEFORMABLE DETR: DEFORMABLE TRANSFORMERS FOR END-TO-END OBJECT DETECTION (论文解析)

DEFORMABLE DETR: DEFORMABLE TRANSFORMERS FOR END-TO-END OBJECT DETECTION 摘要1 介绍2 相关工作3 重新审视 Transformers 和 DETR4 方法4.1 用于端到端目标检测的可变形transformer4.2 Deformable Detr的其他改进和变型5 实验5.1 和DETR 比较5.2 消融实验5.3 与最先进方法的…