Learning and using wx:if and wx:for of small programs

1.wx:if (conditional rendering)

(1) wx:if="{condition}" to determine whether the code block needs to be rendered.
(2) block wx:if
　　　 Because wx:if is a control attribute, it needs to be added to a label.
　　　 If you want to judge multiple component tags at one time, you can use one tag to wrap multiple components, and use wx:if control attributes on it.
　　　 Note: It is not a component, it is just a wrapping element. It will not do any rendering on the page and only accepts control attributes.
　　　 Insert image description here 　　
(3) Comparison between wx:if and hidden
　　For the area controlled by wx:if, the framework has a local rendering process, which will change according to the control conditions. , dynamically create or destroy the corresponding UI structure.
　　wx:if is lazy. If there is no trigger condition and if the trigger condition is false, the framework will do nothing until the condition is true for the first time before it starts rendering.
　　For hidden, the component will always be rendered, and it is just a simple control of display and hiding.
　　Therefore, wx:if has a higher switching cost, while hidden has a higher initial rendering cost. Therefore, if frequent switching is required, it is better to use hidden, and if the conditions are unlikely to change during runtime, wx:if is better.

2.wx:for (conditional rendering)

Use the wx:for control attribute on the component to bind an array, and the component can be repeatedly rendered using the data of each item in the array.
By default, the subscript variable name of the current item in the array defaults to index, and the variable name of the current item in the array defaults to item.
　Note: Use wx:for-item to specify the variable name of the current element of the array;
　　　Use wx:for-index to specify the variable name of the current subscript of the array.
An example of list rendering using wx:for is as follows:　　
The effect achieved is as follows:

wx:for implements list display of personal pages

Page part code:

 <!-- 功能区，列表渲染，点击列表中某项跳转到对应页面 -->
  <view class="funsArea"> 
    <view class="fun" wx:for="{
    
    {funs}}" wx:key="key" wx:for-item="value" data-url="{
    
    {value.funUrl}}" bindtap="funHandle" >
      <text class="funTitle"> {
    
    {
    
    value.funTitle}} </text>   
      <text class="tz"> > </text> 
    </view>    
  </view>

js part code:

//数据data值
 data: {
    
    
    funs:[{
    
    
      funTitle:'个人信息',
      funUrl:'userInfo/userInfo'
    },{
    
    
      funTitle:'我的订单',
      funUrl:'MyOrder/MyOrder'
    },{
    
    
      funTitle:'我的成就',
      funUrl:'MyAchievements/MyAchievements'
    },{
    
    
      funTitle:'我的收藏',
      funUrl:'MyCollection/MyCollection'
    },{
    
    
      funTitle:'消息中心',
      funUrl:'userNews/userNews'
    },{
    
    
      funTitle:'意见反馈',
      funUrl:'Feedback/Feedback'
    }
  ]
  },
  ...
  
  // 接受页面data-url的值；data中的值在event.target.dataset中
    funHandle:function(e){
    
    
    var funurl = e.target.dataset;
    // console.log(funurl);
    wx.navigateTo({
    
    
    url:e.target.dataset.url
    })
  },