鸿蒙Next 支持数据双向绑定的组件:Checkbox--Search--TextInput

Checkbox

语法,$$绑定的变量发生变化时,会触发UI的刷新 ```javascript @Entry @Component struct MvvmCase { @State isMarry:boolean = false @State searchText:string = '' build() { Grid(){ GridItem(){ Column(){ Text("checkbox 的双向绑定") Checkbox() .select($$this.isMarry) Text(this.isMarry+"") Button('改变') .onClick(()=>{ this.isMarry=!this.isMarry }) } } .height(200) .backgroundColor(Color.Yellow) } .width('100%') .height('100%') .columnsTemplate("1fr 1fr") .columnsGap(20) .rowsGap(20) } } ``` ![](https://file.jishuzhan.net/article/1770739551564730370/43ca675c8e14472cb93ab61996b0400f.webp)![](https://file.jishuzhan.net/article/1770739551564730370/eab5dd4e8386e965fab4c25531e87585.webp) #### Search ![](https://file.jishuzhan.net/article/1770739551564730370/a597328db2eb81452a16d5d9f8381194.webp) ```javascript @Entry @Component struct MvvmCase { @State isMarry:boolean = false @State searchText:string = '' build() { Grid(){ GridItem(){ Column(){ Text("search 的双向绑定") Search({value:$$this.searchText}) Text(this.searchText+"") Button('改变') .onClick(()=>{ this.searchText='老宋你好' }) } } .height(200) .backgroundColor(Color.Pink) } .width('100%') .height('100%') .columnsTemplate("1fr 1fr") .columnsGap(20) .rowsGap(20) } } ``` ​​​​​​​![](https://file.jishuzhan.net/article/1770739551564730370/4fee6f0742e74fdc30860d4ce8e99f5c.webp) ![](https://file.jishuzhan.net/article/1770739551564730370/8be4fb59ce992e8c331ac5d9c9c2a639.webp) #### TextInput ![](https://file.jishuzhan.net/article/1770739551564730370/71a4263caae50583abb19bbb3d666f2a.webp) @Entry @Component struct MvvmCase { @State isMarry:boolean = false @State searchText:string = '' controller: TextInputController = new TextInputController() build() { Grid(){ GridItem(){ Column(){ Text("TextInput 的双向绑定") TextInput({ text: $$this.searchText, placeholder: 'TextInput 的双向绑定', controller: this.controller }) Text(this.searchText+"") Button('改变') .onClick(()=>{ this.searchText='老宋你好01' }) } } .height(200) .backgroundColor(Color.Pink) } .width('100%') .height('100%') .columnsTemplate("1fr 1fr") .columnsGap(20) .rowsGap(20) } } ![](https://file.jishuzhan.net/article/1770739551564730370/aeb1a1252f435d1db3d980a4a97b0c96.webp)![](https://file.jishuzhan.net/article/1770739551564730370/def7a3062abb85a538ed26f840a3b983.webp) 还有很多组件都支持双向绑定 ![](https://file.jishuzhan.net/article/1770739551564730370/a5b70bdf9fe8f127f084b10b7169045f.webp)

相关推荐
为美好的生活献上中指9 分钟前
java每日精进1.31(SpringSecurity)
java·开发语言·微服务
星如雨グッ!(๑•̀ㅂ•́)و✧15 分钟前
Spring Boot 2 快速教程:WebFlux处理流程(五)
java·spring boot·后端
小咕聊编程18 分钟前
【Java源码】基于SpringBoot+小程序的电影购票选座系统
java·spring boot·小程序
aiweker18 分钟前
Python处理数据库:MySQL与SQLite详解
数据库·python
亦梦亦醒乐逍遥24 分钟前
【C++基础】字符串/字符读取函数解析
java·c++·算法
老马啸西风31 分钟前
IM 即时通讯系统-47-beardlessCat IM 使用netty开发分布式Im,提供分布netty集群解决方案
java·分布式·im
冬天vs不冷41 分钟前
SpringBoot源码解析(九):Bean定义接口体系
java·spring boot·rpc
CHANG_THE_WORLD1 小时前
C++泛型编程指南08 auto decltype
java·jvm·c++
计算机-秋大田1 小时前
基于SpringBoot的信息技术知识赛系统的设计与实现(源码+SQL脚本+LW+部署讲解等)
java·vue.js·spring boot·后端·课程设计
xidianjiapei0011 小时前
如何在5步内使用 Spring AI 和 OpenAI 的 DALL-E 3 生成图像
java·人工智能·后端·spring·语言模型·openai