您的当前位置:首页正文

怎样使用微信小程序制作九九乘法表?

2024-11-25 来源:个人技术集锦

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

<!--index.wxml-->
<view class='con'>
  <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i">
    <view class='inline' wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j">
      <view wx:if="{{j<=i}}">
        {{i}}×{{j}}={{i*j}}
      </view>
    </view>
  </view>
</view>
/** index.wxss **/

.con {
  font-size: 14px; 
  margin: 10px; 
}

.inline {
  display: inline-block;
  width: 65px;
}

index.json:

{
  "navigationBarBackgroundColor": "#000000",
  "navigationBarTitleText": "九九乘法表",
  "navigationBarTextStyle": "white",
  "backgroundTextStyle": "dark"
}

index.js:

Page({

})

运行结果:

显示全文