博客

1.官方示例

<van-cell-group>
  <van-field
    value="{{ value }}"
    placeholder="请输入用户名"
    border="{{ false }}"
    bind:change="onChange"
  />
</van-cell-group>

Page({
  data: {
    value: '',
  },

  onChange(event) {
    // event.detail 为当前输入的值
    console.log(event.detail);
  },
});

可以看到对于输入框中数据的改变，是通过一个监听函数 bind:change=“onChange”实现的，那么value=”{

{ value }}”有没有进行相对应的数据绑定呢？？？没有

笔者认为应当在监听函数中加上一句this.data. value= event.detail，这样data和页面还有输入框三者之前的数据就绑定在了一起


注册案例

<van-cell-group>
  <van-field
    bind:change="onChangeUsername"
    required
    clearable
    label="用户名"
    placeholder="请输入用户名"
  />

  <van-field
    bind:change="onChangePwd"
    required
    clearable
    type="password"
    label="密码"
    placeholder="请输入密码"
  />
</van-cell-group>
<van-button bindtap="register" type="primary">主要按钮</van-button>

data: {
    username:"",
    password:""
  },
  onChangeUsername(event) {
    //监听用户名输出并同步到username中
    this.data.username = event.detail
  },
  onChangePwd(event){
    //监听密码输入并同步到pwd中
    this.data.password = event.detail
  },
  register(){
    //监听按钮点击事件
    let username=this.data.username
    let pwd=this.data.password;
    console.log(username+"=="+pwd)
  }