微信小程序 数据绑定、修改数据、条件渲染、列表渲染

1. 在 wxml 模板文件中绑定数据

<view class="container">
  <!-- 数据绑定 -->
  <view>
    <view>账号：{{ username }}</view>
    <view>密码：{{ password }}</view>
  </view>
  <!-- 列表渲染 -->
  <!-- wx:key 的值：当列表由纯数字或者纯字符组成，wx:key="*this"-->
  <!-- wx:key 的值：当列表由对象组成，wx:key="对象中唯一属性的名称" -->
  <view wx:for="{{ news }}" wx:for-index="index" wx:for-item="item" wx:key="id" >
    <view>{{ item.title }} ------ {{index}}</view>
    <view>{{ item.detail }}</view>
  </view>
  <!-- 列表渲染 简化默认-->
  <view wx:for="{{ news }}" wx:key="id" >
    <view>{{ item.title }} ------ {{index}}</view>
    <view>{{ item.detail }}</view>
  </view>
  <!-- 条件渲染 -->
  <view>
    <view wx:if="{{gender === '1'}}">男</view>
    <view wx:elif="{{gender === '2'}}">女</view>
    <view wx:else>特别</view>
  </view>
</view>

2. 在 js 脚本文件中定义数据

Page({
  data: {
    // 数据绑定
    username: "标题",
    password: "详情信息",

    // 列表渲染
    news: [{
      id: '1',
      title: "标题1",
      detail: "详情1",
    },{
      id: '2',
      title: "标题2",
      detail: "详情2",
    },{
      id: '3',
      title: "标题3",
      detail: "详情3",
    }],

    // 条件渲染
    gender: "1"
  },
  onLoad: function(options) {
    // 修改数据
    this.setData({
      password: "详情信息...",
    }, function() {
      console.log('onload');
    })
  },
})