007WXML模板语法-条件渲染

wx:if

在小程序中，
使用wx:if=”{{condition}}”来判断是否需要渲染该代码块,
也可以用wx:elif和ex:else来添加else判断

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

  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
  },

结合使用wx:if

如果要一次性控制多个组件的展示与隐藏，
可以使用一个<block></block>标签将多个组件包装起来，
并在<block>标签上使用wx:if控制属性，示例如下：

注意：<block>并不是一个组件，
它只是一个包裹性质的容器，
不会再页面中做任何渲染。

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

hidden

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

<view hidden="{{flag}}">条件为true的时候隐藏元素，否则显示</view>

    flag:true

wx:if和hidden的对比

（1）运行方式不同
	Wx:if以动态创建和移除元素的方式，控制元素的展示与隐藏
	hidden以切换样式的方式（display:none/bkock;）,控制元素的显示与隐藏
（3）使用建议
	切换频繁时，建议使用hidden
	控制条件复杂时，建议使用wx:if搭配wx:elif、wx:else进行展示与隐藏的切换