微信小程序开发——视图与渲染(三)难点

微信小程序开发——视图与渲染(一)

微信小程序开发——视图与渲染(二)

渲染标签

(一)条件标签

1. 使用方法 wx:if="{{ 条件真或假 }}"

微信小程序开发——视图与渲染(三)难点

2.也可以把判断内容放到数据里,同样可以显示。

微信小程序开发——视图与渲染(三)难点

微信小程序开发——视图与渲染(三)难点 3. 实现点击按钮,内容的显示与隐藏交替出现。

微信小程序开发——视图与渲染(三)难点

微信小程序开发——视图与渲染(三)难点

微信小程序开发——视图与渲染(三)难点 也可以使用 else。如果 if 等于 true 显示,那么 else 就为 false 不显示。微信小程序开发——视图与渲染(三)难点

(二)循环标签

1.使用方法 wx:for="{{ 数组 }}"

微信小程序开发——视图与渲染(三)难点

微信小程序开发——视图与渲染(三)难点 2. 可以把数据提取到 data 当中

微信小程序开发——视图与渲染(三)难点

微信小程序开发——视图与渲染(三)难点 3. 如果要显示数组中的内容,可以使用 {{item}},表示一条数据。

微信小程序开发——视图与渲染(三)难点

item 是微信默认的,也可以自定义 item 的值

微信小程序开发——视图与渲染(三)难点

4.如果想显示数组中的元素是第几条数据,可以使用 {{index}}

微信小程序开发——视图与渲染(三)难点

也可以自定义 index 的值

微信小程序开发——视图与渲染(三)难点

5. 动态更改数组中的内容

微信小程序开发——视图与渲染(三)难点

微信小程序开发——视图与渲染(三)难点

微信小程序开发——视图与渲染(四)重点