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

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

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

渲染标签

(一)条件标签

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

微信小程序开发文档——视图与渲染(三)难点_第1张图片

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

微信小程序开发文档——视图与渲染(三)难点_第2张图片

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

微信小程序开发文档——视图与渲染(三)难点_第4张图片

微信小程序开发文档——视图与渲染(三)难点_第5张图片

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

(二)循环标签

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

微信小程序开发文档——视图与渲染(三)难点_第8张图片

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

微信小程序开发文档——视图与渲染(三)难点_第10张图片

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

微信小程序开发文档——视图与渲染(三)难点_第12张图片

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

微信小程序开发文档——视图与渲染(三)难点_第13张图片

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

微信小程序开发文档——视图与渲染(三)难点_第14张图片

也可以自定义 index 的值

微信小程序开发文档——视图与渲染(三)难点_第15张图片

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

微信小程序开发文档——视图与渲染(三)难点_第16张图片

微信小程序开发文档——视图与渲染(三)难点_第17张图片

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

你可能感兴趣的:(微信)