小程序的wx:if和wx:for的学习使用

1.wx:if（条件渲染）

（1）wx:if="{condition}" 来判断是否需要渲染该代码块。
（2） block wx:if
　　　 因为wx:if是一个控制属性，需要将它添加到一个标签上。
　　　 如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来，并在上边使用wx:if 控制属性。
　　　 注： 并不是一个组件，它只是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
　　　 　　
（3） wx:if 和 hidden 的对比
　　被wx:if控制的区域，框架有一个局部渲染的过程，会根据控制条件的改变，动态创建或销毁对应的UI结构。
　　wx:if是惰性的，如果没有触发条件，如果触发条件为flase，则该框架什么都不做，知道条件第一次为true才开始渲染。
　　而对hidden 来说，组件始终会被渲染，只是简单的控制显示与隐藏。
　　因此，wx:if有更高的切换消耗，而hidden有更高的初始渲染消耗。因此，如果需要频繁切换的情境下，用hidden更好，如果在运行时条件不大可能改变则wx:if较好。

2.wx:for（条件渲染）

在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item。
　注：使用wx:for-item 可以指定数组当前元素的变量名；
　　　使用wx:for-index 可以指定数组当前下标的变量名。
使用wx:for实现的列表渲染的实例如下：　　
实现的效果如下图：

页面部分代码：

 <!-- 功能区，列表渲染，点击列表中某项跳转到对应页面 -->
  <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部分代码：

//数据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
    })
  },