微信小程序實現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】