小程序的wxml循环是使用for语句，但是我们在小程序对应的.js文件里面可以使用while语句来做循环。

下面通过案例来介绍While语句，通过按钮来调用事件实现循环和设定值，然后显示。

.wxml文件代码示例

小白教程网www.2d5.net

<view>{{var01}}</view>
 
<button  bindtap='setvar01' type='primary' style='width:90%'>
  通过事件来改变变量的值
</button>

.js脚本中的代码示例

小白教程网www.2d5.net

data: {
    var01:3,
  },
setvar01: function () {
    while (this.data.var01 < 11) {  <!--使用传统的JavaScript语法-->
      console.log(this.data.var01)  <!—输出在console控制台而不是wxml页面-->
      this.data.var01 = this.data.var01 + 1
    } 
    this.setData({   /*如果不用setData函数设置，页面的值（变量var01）不会改变*/
      var01: this.data.var01  
    })
},

点击前和点击后的效果如图9-13和图9-14所示。

日志输出的循环效果如图9-15所示。