第四节：小程序必会用到的三个标签和两个控制属性

欢迎关注我的. 更多内容请关注微信公众号：趣味web前端教程

这一节我们来学习并掌握在实战中一定会用到的三个标签和两个控制属性。
—————————————————

3个常用标签view、text、image

1、 view（视图容器）

view在小程序页面排版中占据绝对地位，相当于html中的div。唯独不同点在于view有它自身的属性，其中hover-class指定按下去的样式类，用的最多

2、 text（文本）

text文本标签较简单，这就不展开说明了，就是存放文本内容。

3、 image（图片，支持PNG,JPG,SVG格式）

image标签也添加了自身的许多属性，其中mode属性（图片裁剪、缩放的模式）用的最多，需要注意的是，这里的image标签需要闭合：

注：mode对应的属性比较多，这里就不一一演示了，附上文档的属性表

接下来是两个重要的控制属性：wx:if和wx:for

1、wx:if（条件渲染）

在框架中，用wx:if判断是否需要渲染该代码块

有if就必然有else，语法是wx:elif，wx:else，不多说，看下图

这个也好理解，number=3，那么符合条件的wx:elif这块就会被渲染

2、wx:for（列表渲染）

在框架中使用wx:for来绑定一个数组，可以直接循环渲染组件；这一块很重要，怎么使用？我们一起来看看。

数组当前默认变量为item，数组下标默认变量为index，这就有人提问了，那我可以自定义数组和下标的变量吗？答案是可以的。

使用 wx:for-item 可以自定义当前数组的变量名；
使用 wx:for-index 可以自定义当前数组下标的变量名；

这样我们就能直接在框架中列渲染出循环的列表了，用的真心方便。

这节的3个标签和2个控制属性都是实战项目中一定会用到的，而且用的比较频繁，所以大家要多多运用，孰能生巧。

有兴趣的可以继续去了解这些的扩展，还有很多形式的玩法，同样也很简单的。