每个商品对应许多品牌，需要把每个品牌对应商品信息展现给用户、当商品信息比较少，可以一行一行写wxml标签。
当商品信息比较多，又不固定的时候、就推荐使用小程序渲染属性了。
通过wx:for绑定数组，使用wxml列表渲染属性、在data对象里定义了items数组、里面是各个商品名称，在wxml文件内block标签里通过wxfor属性传入数组。
index变量:index变量指的是当前元素在数组的下标，也可以通过wx:for="{{index}}"属性，设置变量名。
item变量:item变量指的是数组中的当前元素，也可以通过wx:for="{{item}}"属性，指定想要的一个变量名。
wx:key属性:key代表项目中唯一的标志符、能保持列表项目中自身的一个状态，在页面重新渲染的时候确保带有key组件重新的排序，而不是重新的渲染、从而提高页面渲染的效率。
如图：
block不是组件、只是包装元素，在页面渲染的时候、block不会被渲染出来的。
每天吃什么？用小程序条件渲染属性。
index.wxml中语句的含义：绑定了condition变量、当传入的condition变量值是1的时候、今天就吃饺子，当传入的condition变量值是2的时候、今天就吃米饭，
当传入的condition变量值是3的时候，今天就吃面食。
条件渲染是通过3种属性控制的，是 wx:if、wx:elif、wx:else 这3种属性共同来控制的条件渲染。
index.js文件，在data对象定义了condition变量，变量值的意思生成1到3随机整数。
Mate.random 函数，它是生成‘0’到‘1’的浮点随机数。
Mate.floor 函数，它是对一个浮点数进行处理，来返回一个下区整数。
传给vs文件的condition变量值是3，小程序页面帮我们找到 面食。
wx:if 和 hidden的区别：他们都给控制元素的显示，wx:if在切换是框架有一个局部渲染的过程，会多次进行重复渲染，有更高的切换消耗的。
hidden会有更多的初始化渲染消耗，如果元素平凡切换显示，用hidden更适合！