双向数据绑定#

在 WXML 中,普通属性的绑定是单向的,例如：

1<input value="{{ num }}" />

如果使用 this.setData 来更新 num ,num 和输入框的中显示的值都会被更新为值。但如果用户修改了输入框里的值,却不会同时改变 data 中的 num 。

基本类型的数据绑定#

如果需要在用户输入的同时也将 data 中的数据修改 ,需要借助简易双向绑定机制。此时可以在对应项目之前加入 model: 前缀即可,例如：

1<view>
2  <input type="text" model:value="{{val}}" />
3  <text>{{val}}</text>
4</view>
5
6Page({
7  data: {
8    val:'init data'
9  }
10})

引用类型的数据绑定#

通过value配合事件实现

1<view>
2  <input type="text" value="{{val}}" bindinput="inp" />
3  <text>{{val}}</text>
4</view>
5
6Page({
7  data: {
8    val:'init data'
9  },
10  inp(e){
11    this.setData({
12      val:e.detail.value
13    })
14  }
15})

• form表单提交

  • 给表单组件加 name
  • 给button按钮加 form-type
  • 给form组件加 bindsubmit

  1<form bindsubmit="login" bindreset="reset">
  2    <view>
  3        账号：
  4        <input type="text" name="username" placeholder="账号" />
  5    </view>
  6    <view>
  7        密码：
  8        <input name="pwd" type="text" password placeholder="密码" />
  9    </view>
  10    <button type="primary" form-type="submit">登录</button>
  11    <button type="warn" form-type="reset">重置</button>
  12</form>