微信小程序实现lot开发04 条件渲染与列表渲染

我的网络继电器设备到了，今天下午也很高兴测试一波，非常有趣，通过网络连接到阿里云服务器，通过服务器发送控制信息和收集状态反馈信息，可以找到基于mqtt协议，UDP连接网线后，协议中的网络继电器设备不断包装和包装，使其工作灯闪烁。

那我也不能闲着，抓紧学习小程序基础的最后一部分，条件渲染和列表渲染。

不多说，直接挂代码：

wxml

<!-- 条件渲染 --> <view>   <button bindtap="wxif" type="primary">点击显示图片</button>   <!-- 因为整数可以分为取余2和不是0，所以可以作为开关条件显示某一块view渲染，相当于vue里的V-if -->   <view wx:if="{     
      {sign % 2 == 0? true: false}}">     <image src="{     
      {image}}"></image>   </view> <!-- block块级容器不作为组件，只是包装组件的容器 --> <!-- wx:if通过动态创建和删除元素来显示和隐藏，hidden它只是改变风格，从CPU就占用率而言。使用hidden条件渲染更好！但如果控制条件更加复杂，wx:if会好很多 -->   <block wx:if="{     
      {sign % 2 != 0?true : false}}">     <!-- <view hidden="false">       woshikuaijiyuansudeziming     </view> -->     <view hidden="{     
      {sign % 2 !=0?false : true}}">       woyeshikuaijiyuansudeziming     </view>   </block> </view> <!-- 列表渲染 --> <view>   <view wx:for="{     
      {array}}">   <!-- index是索引，item是循环的子项元素 -->       第{     
      {index}}部 : {     
      {item}}   </view>   <view>~~~~~~~~~~~</view>   <!-- 这是渲染对象json数据时用key提高渲染性能 -->   <view wx:for="{     
      {userList}}" wx:key="id">{     
      {item.name}}</view> </view> 

js

Page({    /**    * 页面的初始数据    */   data: {       sign: 1,       image: 'https://www.com8.cn/wp-content/uploads/2020/11/20201108023310-5fa758e6b2660.jpg',       array:["西游记","水浒传","红楼梦","三国演义"],       userList:[{id: 1,name: 'huang'},{id: 2,name: 'li'},{id: 3,name: 'zhao'}]   },    wxif(e){     this.setData({       sign: this.data.sign   1     })   } })

效果展示图：

关于这个原理，我或多或少在代码注释中告诉过你。我是主人java由于工作原因，后端开发需要学习小程序和lot开发，但是我不会忘记我是一个java程序员，两天后我会有一些java高级结合虚拟机的理解总结，证明我还是铁骨铮铮的java程序员。

溜走了，兄弟们，明天带你去操作阿里云lot接口连接！