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

鸿蒙开发:了解$$运算符

前言

本文基于Api13

有这样一个需求,一个Text组件,一个TextInput组件,要求Text组件同步展示TextInput组件里的内容,也就是TextInput组件输入什么内容,就要在Text组件里展示什么内容,这个需求如何实现呢?

聪明的同学肯定能够想到,这不就是双向绑定吗,这还不简单,@State装饰器就可以搞定啊,确实,@State装饰器可以实现,当TextInput的内容发生变化时,我们给@State装饰器修饰的变量进行赋值,Text组件加载这个变量即可。

简单代码如下:

@Entry
@Component
struct Index {@State message: string = ""build() {Column() {Text(this.message).fontSize(18)TextInput().onChange((value: string) => {this.message = value})}.height("100%").width("100%").justifyContent(FlexAlign.Center)}
}

运行之后效果:

那么除了以上的方式,还有没有一个更简单的方式呢?哎,必须有,这就是$$运算符,使用它,可以让双向绑定实现起来更加的简单,我们把代码修改一下:

 Text(this.message).fontSize(18)
TextInput({ text: $$this.message })

以上的代码,运行之后,和上面的效果是一模一样的,可以看到,使用了$$运算符后,我们不用再单独的去监听输入框的内容变化,它自身就实现了TS变量和系统组件的内部状态保持同步。

什么是$$运算符

一句话解读:$$运算符是系统组件提供ts变量的引用,使用它可以使得ts变量和组件的内部状态保持同步,有一点需要知道,那就是当前仅基础类型变量,至于装饰器的话,也仅仅支持三个,分别是@State、@Link和@Prop装饰器。

支持双向绑定的组件就比较多了,凡是有内部状态属性的组件基本上都支持,像输入组件,单选组件,多选组件等等都是支持的,目前支持的组件列表如下:

组件

支持的参数/属性

Checkbox

select

CheckboxGroup

selectAll

DatePicker

selected

TimePicker

selected

MenuItem

selected

Panel

mode

Radio

checked

Rating

rating

Search

value

SideBarContainer

showSideBar

Slider

value

Stepper

index

Swiper

index

Tabs

index

TextArea

text

TextInput

text

TextPicker

selected、value

Toggle

isOn

AlphabetIndexer

selected

Select

selected、value

BindSheet

isShow

BindContentCover

isShow

Refresh

refreshing

GridItem

selected

ListItem

selected

使用方式,基本上是一致的,比如Checkbox组件,我们实现select属性,进行绑定即可。

  Text(this.select.toString())Checkbox().select($$this.select)

相关总结

$$运算符相对来说还是比较的简单,它的出现,解决了组件状态和变量同步的问题,还有一点需要知道,在$$绑定的变量变化时,会触发UI的同步刷新,当然了在你使用到该变量的时候。

本文标签:HarmonyOS/ArkUI

相关文章:

鸿蒙开发:了解$$运算符

前言 本文基于Api13 有这样一个需求,一个Text组件,一个TextInput组件,要求Text组件同步展示TextInput组件里的内容,也就是TextInput组件输入什么内容,就要在Text组件里展示什么内容,这个需求如何实现呢&…...

基于CEEMDAN-Transformer-BiLSTM的多特征风速气候预测的完整实现方案及PyTorch源码解析

基于CEEMDAN-Transformer-BiLSTM的多特征风速气候预测的完整实现方案及PyTorch源码解析 一、模型架构设计 1.1 整体框架 该模型采用三级架构设计(图1): CEEMDAN分解层:对非平稳风速序列进行自适应分解多模态特征融合模块&#…...

特征预处理

作为机器学习初学者,理解特征预处理就像学做菜前必须学会的"洗菜、切配、腌制"——它直接决定了最终模型的口感(性能)。我会用最生活化的比喻代码示例带你轻松掌握这个必备技能。 一、为什么要特征预处理? 原始数据的问…...

第七课 医学影像学临床研究数据管理与统计分析思路

引言 医学影像学作为现代医学的重要组成部分,在疾病诊断、治疗监测和预后评估中发挥着关键作用。随着影像技术的快速发展和临床研究需求的不断增长,如何有效管理和分析医学影像学研究数据已成为临床研究成功的关键因素。本文将系统介绍医学影像学临床研究中的数据管理流程、…...

基于TypeScript的全栈待办事项应用Demo

Demo地址:git clone https://gitcode.com/rmbnetlife/todo-app.git Todo List 应用 这是一个基于TypeScript的全栈待办事项应用,前端使用React,后端使用Node.js和Express。 项目概述 这个Todo List应用允许用户: 查看所有待办…...

obsidian 中的查找和替换插件,支持正则

最近用着 obsidian 时,发现想要在当前文档中 查找和替换 内容时,没有自动查找和替换的功能,去插件市场查找也没有发现好用的插件,那就自己写一个吧。 全程用的 AI 来写的,当然,我对 JS/CSS/TypeScript 等没…...

国际荐酒师(香港)协会亮相新西兰葡萄酒巡展深度参与赵凤仪大师班

国际荐酒师(香港)协会率团亮相2025新西兰葡萄酒巡展 深度参与赵凤仪MW“百年百碧祺”大师班 广州/上海/青岛,2025年5月12-16日——国际荐酒师(香港)协会(IRWA)近日率专业代表团出席“纯净独特&…...

【深度学习】2. 从梯度推导到优化策略:反向传播与 SGD, Mini SGD

反向传播算法详解 1. 前向传播与输出层误差定义 假设我们考虑一个典型的前馈神经网络,其最后一层为 softmax 分类器,损失函数为交叉熵。 前向传播过程 对于某一隐藏层神经元 j j j: 输入: x i x_i xi​ 权重: w j…...

工业软件国产化:构建自主创新生态,赋能制造强国建设

随着全球产业环境的变化和技术的发展,建立自主可控的工业体系成为我国工业转型升级、走新型工业化道路、推动国家制造业竞争水平提升的重要抓手。 市场倒逼与政策护航,国产化进程双轮驱动 据中商产业研究院预测,2025年中国工业软件市场规模…...

UART、RS232、RS485基础知识

一、UART串口通信介绍 UART是一种采用异步串行、全双工通信方式的通用异步收发传输器功能。 硬件电路: •简单双向串口通信有两根通信线(发送端TX和接收端RX) •TX与RX要交叉连接 •当只需单向的数据传输时,可以只接一根通信线…...

AI重塑数据治理的底层逻辑

AI重塑数据治理的底层逻辑 人治模式:一个必然失败的商业逻辑智治模式:重新定义数据治理的商业模式结语 上个月,一位老友约我喝茶。他是某知名互联网公司的数据总监,聊天时满脸愁容。 “润总,我们公司数据治理团队有50多…...

基于 AI 实现阿里云的智能财务管家

新钛云服已累计为您分享844篇技术干货 为了解决传统账单处理中人工查询效率低下、响应速度慢及易出错等问题,同时顺应AI技术发展趋势,提升服务智能化水平。随着业务规模扩大和账单数据复杂度增加,人工处理已难以满足高效管理需求。我们想到通…...

【成品论文】2025年电工杯数学建模竞赛B题50页保奖成品论文+matlab/python代码+数据集等(后续会更新)

文末获取资料 多约束条件下城市垃圾分类运输调度问题 摘要 随着城市化进程加快,城市生活垃圾产量持续增长,垃圾分类运输已成为城市环境治理的关键环节。本文针对城市垃圾分类运输中的路径优化与调度问题,综合考虑不同垃圾类型、车辆载重约束…...

​​IIS文件上传漏洞绕过:深入解析与高效防御​

目录 ​​一、IIS解析漏洞的底层逻辑​​ ​​二、绕过技巧:从基础到高级​​ ​​1. 分号截断与路径拼接(经典手法)​​ ​​2. 目录解析漏洞利用​​ ​​3. 操作系统特性与字符混淆​​ ​​4. 扩展名黑名单绕过​​ ​​5. 结合其他…...

【node.js】数据库与存储

个人主页:Guiat 归属专栏:node.js 文章目录 1. 数据库概述1.1 数据库在Node.js中的作用1.2 Node.js支持的数据库类型 2. 关系型数据库集成2.1 MySQL与Node.js2.1.1 安装MySQL驱动2.1.2 建立连接2.1.3 执行CRUD操作 2.2 PostgreSQL与Node.js2.2.1 安装pg驱…...

leetcode2081. k 镜像数字的和-hard

1 题目:k 镜像数字的和 官方标定难度:难 一个 k 镜像数字 指的是一个在十进制和 k 进制下从前往后读和从后往前读都一样的 没有前导 0 的 正 整数。 比方说,9 是一个 2 镜像数字。9 在十进制下为 9 ,二进制下为 1001 &#xff…...

Halcon 单目相机标定测量

文章目录 双面相机标定链接一维测量gen_cam_par_area_scan_division -为区域扫描相机生成一个相机参数元组,该相机的变形由分割模型建模。(相机自带参数)create_calib_data -创建Halcon 数据标定模型set_calib_data_cam_param -设置校准数据模型中摄像机的类型和初始…...

git子模块--常见操作

克隆仓库 标准化克隆流程 基本命令git clone <父仓库远程URL> [本地文件名] cd <本地仓库名> git submodule init # 初始化子模块配置 git submodule update # 拉取子模块内容一次性完成克隆和初始化流程 基本命令git clone --recurse-submodules <父仓库远…...

解决SQL Server SQL语句性能问题(9)——创建和更新统计对象

9.3. 创建和更新统计对象 与Oracle中的统计数据相对应,SQL Server中的统计对象,本专栏6.3节中也提到,数据库CBO依赖其为SQL语句产生最合适、最高效的查询计划。数据库CBO结合各类统计对象,并利用其内置的、复杂而高级的模型与算法,尽可能的为SQL语句计算和评估出所有候选…...

数据被泄露了怎么办?

数据泄露是严重的网络安全事件&#xff0c;需立即采取行动以降低风险。以下是关键应对步骤&#xff1a; 1. 确认泄露范围 核实泄露内容&#xff1a;确定泄露的是密码、财务信息、身份证号还是其他敏感数据。 评估来源&#xff1a;检查是个人设备被入侵、某平台漏洞&#xff0c…...

绩效管理缺乏数据支持,如何提高客观性?

要提高绩效管理的客观性&#xff0c;应从建立科学的指标体系、加强数据采集手段、引入自动化绩效工具、强化过程记录机制、定期评估与反馈优化五大方面着手。其中&#xff0c;建立科学的指标体系是关键基础。没有数据支撑的绩效体系&#xff0c;往往容易陷入主观打分、个人偏见…...

unity控制相机围绕物体旋转移动

记录一下控制相机围绕物体旋转与移动的脚本&#xff0c;相机操作思路分为两块&#xff0c;一部分为旋转&#xff0c;一部分为移动&#xff0c;旋转是根据当前center中心点的坐标&#xff0c;根据距离设置与默认的旋转进行位置移动&#xff0c;移动是根据相机的左右和前后进行计…...

线性代数:AI大模型的数学基石

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家、CSDN平台优质创作者&#xff0c;高级开发工程师&#xff0c;数学专业&#xff0c;10年以上C/C, C#, Java等多种编程语言开发经验&#xff0c;拥有高级工程师证书&#xff1b;擅长C/C、C#等开发语言&#xff0c;熟悉Java常用开…...

【C/C++】从零开始掌握Kafka

文章目录 从零开始掌握Kafka一、Kafka 基础知识理解&#xff08;理论&#xff09;1. 核心组件与架构2. 重点概念解析 二、Kafka 面试重点知识梳理三、C 使用 Kafka 的实践&#xff08;librdkafka&#xff09;1. librdkafka 简介2. 安装 librdkafka 四、实战&#xff1a;高吞吐生…...

02_redis分布式锁原理

文章目录 一、redis如何实现分布式锁1. 使用 SETNX 命令2. 设置过期时间3. 释放锁4. 注意事项5. 示例代码 二、Java中分布式锁如何设置超时时间1. Redis分布式锁2. 基于Zookeeper的分布式锁3. 基于数据库的分布式锁注意事项 一、redis如何实现分布式锁 Redis 实现分布式锁是一…...

简单血条于小怪攻击模板

创建一个2d正方形&#xff08;9-Sliced&#xff09;命名为Player&#xff0c;在Player下面新建一个画布&#xff08;Canvas&#xff09;命名为PlayerHealthUI&#xff0c;在画布下面新建一个滑动条&#xff08;Slider&#xff09;命名为HealthBar 把PlayerHealthUI脚本挂载到Pl…...

Win11 系统登入时绑定微软邮箱导致用户名欠缺

Win11 系统登入时绑定微软邮箱导致用户名欠缺 解决思路 -> 解绑当前微软邮箱和用户名 -> 断网离线建立本地账户 -> 设置本地账户为Admin权限 -> 注销当前账户&#xff0c;登入新建的用户 -> 联网绑定微软邮箱 -> 删除旧的用户命令步骤 管理员权限打开…...

代码随想录算法训练营第四十六四十七天

卡码网题目: 110. 字符串接龙105. 有向图的完全联通106. 岛屿的周长107. 寻找存在的路径 其他: 今日总结 往期打卡 110. 字符串接龙 跳转: 110. 字符串接龙 学习: 代码随想录公开讲解 问题: 字典 strList 中从字符串 beginStr 和 endStr 的转换序列是一个按下述规格形成的序…...

华硕FL8000U加装16G+32G=48G内存条

华硕FL8000U加装16G32G48G内存条 一、华硕FL8000U加装内存条endl 一、华硕FL8000U加装内存条 相关视频链接: https://www.bilibili.com/video/BV1gw4dePED8/ endl...

前后端联调实战指南:Axios拦截器、CORS与JWT身份验证全解析

前言 在现代Web开发中&#xff0c;前后端分离架构已成为主流&#xff0c;而前后端联调则是开发过程中不可避免的关键环节。本文将深入探讨前后端联调中的三大核心技术&#xff1a;Axios拦截器的灵活运用、CORS跨域问题的全面解决方案以及JWT身份验证的安全实现。通过本文&…...