一、小程序基本数据绑定

字符串、对象

<!-- 字符串 -->
<view>{{ userName }}</view>

<!-- 数字运算 -->
<view>{{ age + 1 }}</view>

<!-- 布尔值控制属性 -->
<view hidden="{{ isHidden }}">根据 isHidden 显示/隐藏</view>

Page({
  data: {
    userName: "Alice",
    age: 25,
    isHidden: false
  }
})

二、对象属性绑定

<view>{{ userInfo.name }}</view>
<view>手机号：{{ userInfo.phone }}</view>

Page({
  data: {
    userInfo: {
      name: "Bob",
      phone: "13800138000"
    }
  }
})

修改对象属性需通过 setData 指定完整路径

this.setData({
  'userInfo.name': 'Carol'  // 路径字符串写法
})

三、数组绑定与循环渲染

1、渲染数组

使用 wx:for 遍历数组，默认是当前项变量为item 下标为index

<view wx:for="{{items}}" wx:key="id">
  {{index + 1}}. {{item.name}}
</view>

Page({
  data: {
    items: [
      { id: 1, name: "苹果" },
      { id: 2, name: "香蕉" }
    ]
  }
})

2、修改数组

需要建新数组或使用路径更新：

// 添加新项
this.setData({
  items: [...this.data.items, { id: 3, name: "橙子" }]
});
// 修改第一项
this.setData({
  'items[0].name': '红苹果'
});

wx:for 循环需要指定wx:for 提高渲染效率

四、表单输入的双向绑定

value 绑定数据 + bindinput 事件更新实现双向同步

<input 
  value="{{inputValue}}" 
  bindinput="onInput" 
  placeholder="输入内容"
/>
<view>实时预览：{{inputValue}}</view>

Page({
  data: { inputValue: '' },
  onInput(e) {
    this.setData({
      inputValue: e.detail.value  // 更新输入框值
    });
  }
})

扩展：

如果单字段较多，可用 data- 属性标识字段名 减少事件函数

<input bindinput="bindInput" data-field="userName" />

bindInput(e) {
  const field = e.currentTarget.dataset.field;
  this.setData({
    [`formData.${field}`]: e.detail.value
  });
}

五、特殊绑定方式

1、样式与类名绑定

<!-- 动态 class -->
<view class="{{ isActive ? 'active' : '' }}">样式</view>

<!-- 内联 style -->
<view style="color: {{textColor}};">文字</view>

2、使用扩展运算符展开对象

<template data="{{ ...obj1, ...obj2, extra: 100 }}"></template>

3、条件渲染 wx:if vs  hidden

• wx:if：动态添加/移除节点，适合变动少的场景。

• hidden：切换 CSS 显示，适合频繁切换。

<view wx:if="{{score > 60}}">及格</view>
<view hidden="{{!isVisible}}">始终存在但显隐控制</view>