微信小程序实现9*9乘法表

九九乘法表是各位砖友面试，学习中经常遇到的一个简单问题

对于这类算法的实现，我们往往是用两个for循环进行解决，今天我简单探究一下如何在小程序中实现九九乘法表的算法

wxml中实现算法逻辑

<!--9*9乘法表实现-->
<view class='row' wx:for="{{[1,2,3,4,5,6,7,8]}}" wx:for-item="row">
  <view class='col' wx:for="{{[1,2,3,4,5,6,7,8]}}" wx:for-item="col" wx:if="{{col <= row}}">
    {{col}}*{{row}} = {{col*row}}
  </view>
</view>

这里for-item="row"，是定义for循环的循环计数命名为row；for-item="col"，是定义for循环的循环计数命名为col。

wxss 实现样式属性 

/* 9*9乘法表 */
.row{
  display: flex;
  justify-content: flex-start; /* 线性布局 */
  font-size: 10px;
}

.row .col{
  width:45px;
}

 

输出结果【预设机型为iphone8】