鸿蒙-09(双向绑定)

43 阅读1分钟

双向绑定

鸿蒙开发中实际上也满足mwm的思想。

  • model:数据模型
  • view:页面视图
  • viewmodel:视图和模型映射对象需要在页面中基于表单元素来实现一个双向绑定。表单的数据渲染来源于我们组件内部状态。组件内部状态数据产生变化表单更新。表单数据也反过来影响我们内部状态。

相关文档: developer.huawei.com/consumer/cn…

struct Demo {
  @State taskName:string = "默认值"
  build(){
    TextInput({text:$$this.taskName})
  }
}

支持对象绑定

interface User {
  id:string
  name:string
}
struct Demo {
  @State userObj:User = {id:'1',name:'鸿蒙'}
  build(){
    TextInput({placeholder:"请输入任务名称",text:$$this.userObj.name})
  }
}

单选框数据绑定用法

Radio({value:"2",group:"type"})
  .width(25)
  .height(25)
  .onChange((isChecked:boolean)=>{
    if(isChecked){
      // 在change事件中改变值
      this.taskType='2'
    }
  })
  // checked配置默认选中值
  .checked(this.taskType==='2')