条件渲染和列表渲染

一、条件渲染

1、index.js

// index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
   //字符串类型的数据
   info: 'Hello World',
   imgSrc:  'http://www.itheima.com/images/logo.png',
   randomNum1: Math.random()*10,
   randomNum2: Math.random().toFixed(2),
   count:0,
   msg:'你好,',
   type:1
  },

2、index.wxml

<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else>保密</view>

二、结合<block>使用wx:if

        如果要一次性控制多个组件的展示和隐藏，可以使用一个<block></block>标签将多个组件包装起来，并在<block>标签上使用wx:if控制属性。<block>并不是一个组件，他是一个包裹性质的容在页面中做任何渲染。

        wx:if，wx:elif,wx:else以动态创建和移除元素的方式，控制元素的显示和隐藏。适用于控制条件复杂时。

        true:显示，false:隐藏 

<block wx:if="{{true}}">
	<view>view1</view>
	<view>view2</view>
</block>

三、hidden

        在小程序中，直接使用hidden="{{condition}}"也能控制元素的显示和隐藏。

        hidden以切换样式的方式（display:none:block;）控制元素的显示和隐藏，适用于频繁切换时。

index.js

// index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
   //字符串类型的数据
   info: 'Hello World',
   imgSrc:  'http://www.itheima.com/images/logo.png',
   randomNum1: Math.random()*10,
   randomNum2: Math.random().toFixed(2),
   count:0,
   msg:'你好,',
   type:1,
   flag:true
  },
  //定义按钮的事件处理函数
  btnTapHandler(e) {
    console.log(e)
  },
  //+1 按钮的点击事件处理函数
  CountChange() {
    this.setData({
      count: this.data.count+1
    })
  },
  btnTap2(e){
    this.setData({
      count: this.data.count+e.target.dataset.info
    })
  },
  //文本框内容改变事件
  inputHandler(e){
   // console.log(e.detail.value)
   this.setData({
     msg: e.detail.value//通过e.detail.value获取文本框最新的值
   })
  },
  /**
   * 生命周期函数--监听页面加载
   */
 onLoad: function (options){

 },
/**
 * 生命周期函数--监听页面初次渲染完成
*/ 
})

index.wxml

<view hidden="{{!flag}}">条件为true的时候隐藏元素，否则显示</view>
<view wx:if="{{flag}}">这是使用wx:if控制的元素</view>

二、列表渲染 

1、wx:for可以根据指定的数组，循环渲染重复的组件结构。默认情况下，当前循环的索引用index表示；当前循环项用item表示。

2、手动指定索引和当前项的变量名

        这种方法使用起来繁琐，一般非常少用 。

<view wx:for="{{arr1}}" wx:for-index="idx" wx:for-item="itenName">
	索引是:{{idx}},item项是:{{itenName}}
</view>

3、wx:key

        提高渲染的效率。

// index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
   //字符串类型的数据
   info: 'Hello World',
   imgSrc:  'http://www.itheima.com/images/logo.png',
   randomNum1: Math.random()*10,
   randomNum2: Math.random().toFixed(2),
   count:0,
   msg:'你好,',
   type:1,
   flag:true,
   arr1:['苹果','荔枝','桃子'],
   userList:[
     {id:1,name:'樱桃'},
     {id:2,name:'丸子'},
     {id:3,name:'西瓜'}
   ]
  },
  //定义按钮的事件处理函数
  btnTapHandler(e) {
    console.log(e)
  },
  //+1 按钮的点击事件处理函数
  CountChange() {
    this.setData({
      count: this.data.count+1
    })
  },
  btnTap2(e){
    this.setData({
      count: this.data.count+e.target.dataset.info
    })
  },
  //文本框内容改变事件
  inputHandler(e){
   // console.log(e.detail.value)
   this.setData({
     msg: e.detail.value//通过e.detail.value获取文本框最新的值
   })
  },
  /**
   * 生命周期函数--监听页面加载
   */
 onLoad: function (options){

 },
/**
 * 生命周期函数--监听页面初次渲染完成
*/ 
})

 index.wxml

<view wx:for="{{arr1}}" wx:key="index">
	索引是:{{index}},item项是:{{item}}
</view>

<view>~~~~~~~</view>

<view wx:for="{{arr1}}" wx:for-index="idx" wx:for-item="itenName" wx:key="idx">
	索引是:{{idx}},item项是:{{itenName}}
</view>

<view>~~~~~~~</view>

<view wx:for="{{userList}}" wx:key="id">
	{{item.name}}
</view>

运行结果：