harmony OS NEXT-双向数据绑定MVVM以及$$语法糖介绍

@Entry
@Component
struct Test1 {
  @State userName: string = '小程神'

  build() {
    Column({ space: 20 }) {
      Text('通过onChange收集inputValue')
      TextInput()
        .border({
          color: Color.Black,
          width: 1
        })
        .onChange((value) => {
          this.userName = value

        })
      Text('展示inputvalue')
      TextInput({ text: this.userName })
        .border({
          width: 1,
          color: Color.Black
        })
    }.height('100%')
    .width('100%')
    .padding(20)
  }
}

@Entry
@Component
struct Test2 {
  @State message: string = 'Hello World';

  build() {
    Column({ space: 10 }) {
      Text(this.message)
      TextInput({ text: $$this.message })
      Button('改变数据')
        .onClick(() => {
          this.message = '我的小猫暴脾气'
        })


    }.width('100%')
    .height('100%')
    .padding(20)
  }
}

    Text(this.ischecked+'')
      Checkbox()
        .select($$this.ischecked)

      Text(this.isOn + '')
      Toggle({
        type: ToggleType.Switch,
        isOn: $$this.isOn
      })

     Text(this.date.toDateString())
      DatePicker({
        selected:$$this.date
      })

   Text('mySelect' + this.select)
      Select([
        { value: 'vip' },
        { value: '绿钻' },
        { value: '黄钻' }
      ])
        .value($$this.select)