微信小程序 wx:for 打印乘法口诀表

js代码

<div class="one" wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i" wx:key="i">
    <div class="two" wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j" wx:key="j">
      <span wx:if="{{i >= j}}" >
        {{j}} * {{i}} = {{i * j}}
      </span>
    </div>
    <br vx:if="{{i===9}}" />
  </div>

    <div class="kh"></div>
    <!--222222222  -->
  <div class="one" wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i" wx:key="i">
    <div class="two" wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j" wx:key="j">
      <span wx:if="{{i <= j}}" >
        {{i}} * {{j}} = {{i * j}}
      </span>
    </div>
    <br wx:if="{{i===9}}" />
  </div>
  <div class="kh"></div>
  <!--33333333333  -->
   <div class="one" wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i" wx:key="i">
    <div class="two" wx:for="{{[9, 8, 7, 6, 5, 4, 3, 2, 1]}}" wx:for-item="j" wx:key="j">
      <span wx:if="{{i >= j}}" >
        {{j}} * {{i}} = {{i * j}}
      </span>
    </div>
    <br wx:if="{{i===9}}" />
  </div>
  <div class="kh"></div>
  <!--4444444444  -->
   <div class="one" wx:for="{{[9, 8, 7, 6, 5, 4, 3, 2, 1]}}" wx:for-item="i" wx:key="i">
    <div class="two" wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j" wx:key="j">
      <span wx:if="{{i >= j}}" >
        {{j}} * {{i}} = {{i * j}}
      </span>
    </div>
    <br wx:if="{{i===9}}" />
  </div>

css代码

.one{
  height: 30rpx;
  display: flex;
  flex-direction: row-reverse;
}
.two{

  width: 100rpx;
}
span{
  font-size:17rpx;
}
br{
  display: block;
}

.kh{
  display: block;
  height: 20rpx;
}