微信小程序的案例

利用wx：if及wx：for数据绑定来实现输出乘法口诀表的编程

自定一个文件：在.js里面抒写。

// pages/jiu/jiu.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    multiplicationTable: [1, 2, 3, 4, 5, 6, 7, 8, 9] 
  },
  // 定义了multiplicationTable数组在data对象中，这是实现乘法口诀表所需的基础数据。然而，由于乘法口诀表是二维的，你需要一个二维数组来表示它。每个内部数组代表一行，包含从1到当前行数的所有数字。

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

在wxml里面抒写乘法表的程序。

<view wx:for="{{multiplicationTable}}" wx:key="row" wx:for-item="row" class="row">  
  <!-- <view>：定义一个视图容器。 -->
<!-- wx:for="{{multiplicationTable}}"：使用wx:for指令来遍历multiplicationTable数组。这里假设multiplicationTable是一个一维数组，包含了乘法口诀表的所有数字（从1到9）。 -->
<!-- wx:key="row"：为每个循环项提供一个唯一的标识符，这里使用row作为key。 -->
<!-- wx:for-item="row"：定义数组中的当前项在模板中的变量名为row。 -->
<!-- class="row"：给这个视图容器添加一个CSS类名为row，用于样式控制。 -->
  <block wx:for="{{multiplicationTable}}" wx:key="col" wx:for-item="col">  
    <!-- <block>：一个非渲染块元素，用于包裹内容，但不会在最终的渲染结果中显示。 -->
<!-- wx:for="{{multiplicationTable}}"：再次使用wx:for指令来遍历multiplicationTable数组。这里是为了生成每一行的所有列。 -->
<!-- wx:key="col"：为每个循环项提供一个唯一的标识符，这里使用col作为key。 -->
<!-- wx:for-item="col"：定义数组中的当前项在模板中的变量名为col。 -->
    <view wx:if="{{col <= row}}" class="cell">  
      <!-- <view>：定义另一个视图容器。 -->
<!-- wx:if="{{col <= row}}"：使用wx:if指令来根据条件判断是否渲染这个视图容器。只有当col（当前列的数字）小于或等于row（当前行的数字）时，才渲染这个容器。 -->
<!-- class="cell"：给这个视图容器添加一个CSS类名为cell，用于样式控制。 -->
      {{col}}*{{row}} = {{col * row}}  
      <!-- {{col}}*{{row}} = {{col * row}}：这是模板的文本内容，用于显示乘法口诀。{{col}}和{{row}}是前面定义的两个变量，分别代表当前列和当前行的数字。{{col * row}}则计算这两个数字的乘积。 -->

    </view> 
    <!-- </view>：结束之前定义的视图容器。 --> 
  </block>  
  <!-- </block>：结束之前定义的<block>非渲染块元素。 -->
</view>
<!-- </view>：结束外层循环的视图容器。 -->

在wxss里面抒写样式。

.row {  
  display: flex;  
  flex-direction: row;  
}  
  
.cell {  
  width: 40px; /* 或者你需要的宽度 */  
  height: 40px; /* 或者你需要的高度 */  
  text-align: center;  
  border: 1px solid #ccc; /* 边框样式 */  
  margin-right: 5px; /* 列之间的间距 */  
}

运行结果。