微信小程序——视图层（wxml）

1.简单的绑定:    

WXML 中的动态数据均来自对应 Page 的 data。

     数据绑定使用 Mustache 语法（双大括号）将变量包起来;

    

<view> {{ message }} view>

Page({
  data: {
    message: 'Hello MINA!'
  }
})

2.列表渲染

    在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

    默认数组的当前项的下标变量名为 teachers，数组当前项的变量名默认为 item




eg:

         

        wx:for 也可以嵌套，下边是一个九九乘法表

  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    view>
  view>
view>

3.条件渲染

wx:if

在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：

         效果就是wx.if没有被渲染就无法显示

   ok,今天就写到这里，敬请期待下节内容~~~~

   拜了个拜