微信小程序条件渲染

条件渲染

使用WX:IF等语句进行有条件的渲染，如下图所示：

我们举个例子来看一下具体的应用：

<!--条件渲染-->
<view wx:if="{{type==1}}">男</view>
<view wx:elif="{{type==2}}">女</view>
<view wx:else>保密</view>

我们先在ts文件中定义数据type:

data: {
    cout:0,
    info:"hello world",
    imgrsc:"https://photokit.com/features/edit-text-in-image/?lang=zh",
    msg:"你好",
    type:1,
  },

我们可以在调试区改变type的值，这样我们就能看到页面的变化：

我们在这里介绍一种BLOCK组件，

<block wx:if="{{cout==0}}"><button type="primary" bind:tap="bindtapHandler"> 按钮</button>
<button type="primary" bind:tap="countBop">数字+1</button>
<button type="primary" bind:tap="shuzi" data-info="{{5}}">参数</button>
</block>

加上block组件，把三个按钮组件放进去，可以实现三个按钮组件的有条件渲染。