1、案例描述

1、输入一个颜色的英文单词，显示一种颜色（在view中使用wx:if,wx:elif,wx:else）单条条件渲染
2、输入一个（0~3）数字，显示几个问题（在block中使用wx:if,wx:elif,wx:else）多条条件渲染

2、实现过程

2.1、代码展示

• wxml

<!--index.wxml-->
<view class="box">
  <view class="box">
    <view class="title">wxml当中的条件渲染</view>
    <input type="text" placeholder="请输入你喜欢的颜色（用英文）" bindblur="input1"
      style="background-color: rgb(148, 150, 151); height: 30px; margin: 20px;" />
    <view class="panduan">
      <text wx:if="{{color == '0'}}">请您输入颜色</text>
      <text wx:elif="{{(color == 'red')||(color == 'yellow')||(color == 'blue')}}">您输入的颜色是三原色</text>
      <text wx:else>您输入的颜色不是三原色</text>
    </view>
    <view class="zhanshi" style="background-color: {{color}};"></view>
  </view>
  <view class="box">
    <view class="title">wxml当中block多组件渲染</view>
    <input type="digit" placeholder="请输入问题数量（用数字）" bindblur="input2"
      style="background-color: rgb(148, 150, 151); height: 30px; margin: 20px;" />
    <block wx:if="{{question == 1}}">
      <view class="q">请回答你的名字？</view>
    </block>
    <block wx:elif="{{question == 2}}">
      <view class="q">请回答你的名字？</view>
      <view class="q">请回答你的性别？</view>
    </block>
    <block wx:elif="{{question == 3}}">
      <view class="q">请回答你的名字？</view>
      <view class="q">请回答你的性别？</view>
      <view class="q">请回答你的生日？</view>
    </block>
    <block wx:else>
      <view class="q">请先选择问题数量</view>
    </block>
  </view>

</view>

• wxss

.panduan{
    text-align: center;
    font-size: 20px;
    margin-bottom: 10px;
}
.zhanshi{
    width: 50px;
    height: 20px;  
    margin: auto;
}
.q{
    text-align: center;
    font-size: 15x;
    margin-bottom: 5px;
}

• js

//index.js
var color = '0';
var question = 0;
Page({
  data:{
    color : color,
    question : 0
  },
  input1:function(e){
    console.log(e);
    color = e.detail.value;
    this.setData({
      color : color
    })
  },
  input2:function(e){
    console.log(e);
    question = e.detail.value;
    this.setData({
      question : question
    })
  }
})

2.2、结果展示

结果展示.jpg

3、知识汇总

• 条件渲染.jpg

条件渲染总结.jpg block不是组件.jpg block多个组件标签渲染.jpg

4、踩坑说明

• 什么叫block不是一个组件，只接受控制属性，不会在页面做渲染

wxml:

<block class="panduan">
    <text wx:if="{{color == '0'}}">请您输入颜色</text>
    <text wx:elif="{{(color == 'red')||(color == 'yellow')||(color == 'blue')}}">您输入的颜色是三原色</text>
    <text wx:else>您输入的颜色不是三原色</text>
  </block>

wxss:

.panduan{
    text-align: center;
    font-size: 30px;
}

像上面的代码，运行后的结果是，不论wxss当中.panduan{}如何设置，页面当中都不会发生改变，只有将wxml中block改为view时，wxss当中的样式才会渲染到页面。

• 不论是在view中写wx:if，还是在block中写wx:if，都是可以用wx:if,wx:elif,else结构的。