微信小程序教程系列之视图层的条件渲染（10）

本教程为大家分享了使用wx:if进行视图层的条件渲染，供大家参考，具体内容如下

使用wx:if进行视图层的条件渲染

示例：

wxml：使用view

<!--index.wxml-->
<button bindtap="EventHandle">按钮</button>
<!-- wx:if -->
<view wx:if="{{boolean==true}}">
  <view class="bg_black"></view>

</view>
<view wx:elif="{{boolean==false}}">
  <view class="bg_red"></view>
</view>

wxss：

/**index.wxss**/
.bg_black {
 height: 200rpx;
 background: lightskyblue;
}
.bg_red {
 height: 200rpx;
 background: lightpink;

}

js：

// index.js

Page({
 data: {
  boolean:false
 },
 EventHandle: function(){
  var bol = this.data.boolean;
  this.setData({
   boolean: !bol

  })

 }

})

运行：

续上：

把上面标注绿色部分的view改成block

wxml：使用block

<!--index.wxml-->
<button bindtap="EventHandle">按钮</button>
<!-- wx:if -->
<block wx:if="{{boolean==true}}">
  <view class="bg_black"></view>
</block>
<block wx:elif="{{boolean==false}}">
  <view class="bg_red"></view>

</block>

运行：

续上：

增加一个wx:for做列表渲染

wxml：

<!--index.wxml-->
<button bindtap="EventHandle">按钮</button>
<!-- wx:if -->
<block wx:if="{{boolean==true}}" wx:for="{{arr}}">
  <view class="bg_black">内容：{{item}}</view>
</block>
<block wx:elif="{{boolean==false}}">
  <view class="bg_red">无内容</view>

</block>

index.js：

// index.js
Page({
 data: {
  boolean:false,
  arr: [1,2,3]
 },

 EventHandle: function(){

  var bol = this.data.boolean;

  this.setData({

   boolean: !bol

  })

 }

})

运行：

编辑错误。

原因是wx:if不能与wx:for共用在一个组件上！

续上：

wx:if和wx:for必须分开使用

wxml：

<!--index.wxml-->
<button bindtap="EventHandle">按钮</button>
<!-- wx:if -->
<block wx:if="{{boolean==true}}">
  <block wx:for="{{arr}}">
    <view class="bg_black">内容：{{item}}</view>

  </block>
</block>
<block wx:elif="{{boolean==false}}">
  <view class="bg_red">无内容</view>

</block>

wxss：

/**index.wxss**/
.bg_black {
 height: 200rpx;
 background: lightskyblue;
}
.bg_red {
 height: 200rpx;

 background: lightpink;

}

index.js：

// index.js
Page({
 data: {
  boolean:false,
  arr: [1,2,3]
 },
 EventHandle: function(){
  var bol = this.data.boolean;

  this.setData({
   boolean: !bol

  })

 }

})

运行：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# 微信小程序  # wx  # if  # 条件渲染  # 微信小程序 条件渲染详解  # 微信小程序 教程之条件渲染  # 微信小程序如何实现列表渲染和条件渲染  # 三分钟带你快速学会微信小程序的条件渲染  # 用在  # 大家分享  # 能与  # 具体内容  # 大家多多  # xml  # lt  # brush  # pre  # class  # bindtap  # EventHandle  # button  # index  # gt  # view  # style  # text  # item  # bg_black 

相关文章： 建站之星如何防范黑客攻击与数据泄露？  如何高效生成建站之星成品网站源码？  上海网站制作网页,上海本地的生活网站有哪些？最好包括生活的各个方面的？  ,如何利用word制作宣传手册？  Bpmn 2.0的XML文件怎么画流程图  黑客入侵网站服务器的常见手法有哪些？  西安制作网站公司有哪些,西安货运司机用的最多的app或者网站是什么？  如何通过虚拟机搭建网站？详细步骤解析  建站之星伪静态规则如何设置？  我的世界制作壁纸网站下载,手机怎么换我的世界壁纸？  如何在万网主机上快速搭建网站？  如何在Tomcat中配置并部署网站项目？  建站之星安装需要哪些步骤及注意事项？  如何快速搭建高效WAP手机网站？  如何做网站制作流程,*游戏网站怎么搭建？  如何在西部数码注册域名并快速搭建网站？  如何在新浪SAE免费搭建个人博客？  如何在云主机上快速搭建多站点网站？  网站插件制作软件免费下载,网页视频怎么下到本地插件？  如何选择靠谱的建站公司加盟品牌？  寿县云建站：智能SEO优化与多行业模板快速上线指南  c++怎么编写动态链接库dll_c++ __declspec(dllexport)导出与调用【方法】  建站之星下载版如何获取与安装？  如何快速配置高效服务器建站软件？  山东网站制作公司有哪些,山东大源集团官网？  制作充值网站的软件,做人力招聘为什么要自己交端口钱？  网站视频制作书签怎么做,ie浏览器怎么将网站固定在书签工具栏？  如何在IIS中新建站点并解决端口绑定冲突？  广州建站公司哪家好？十大优质服务商推荐  兔展官网 在线制作,怎样制作微信请帖？  如何快速上传自定义模板至建站之星？  网站微信制作软件,如何制作微信链接？  如何通过VPS建站无需域名直接访问？  智能起名网站制作软件有哪些,制作logo的软件？  如何在Windows服务器上快速搭建网站？  如何在企业微信快速生成手机电脑官网？  北京制作网站的公司排名,北京三快科技有限公司是做什么？北京三快科技？  如何快速重置建站主机并恢复默认配置？  如何通过网站建站时间优化SEO与用户体验？  品牌网站制作公司有哪些,买正品品牌一般去哪个网站买？  黑客如何通过漏洞一步步攻陷网站服务器？  阿里云网站制作公司,阿里云快速搭建网站好用吗？  弹幕视频网站制作教程下载,弹幕视频网站是什么意思？  香港服务器网站测试全流程：性能评估、SEO加载与移动适配优化  制作网站建设的公司有哪些,网站建设比较好的公司都有哪些？  如何通过WDCP绑定主域名及创建子域名站点？  企业微网站怎么做,公司网站和公众号有什么区别？  专业企业网站设计制作公司,如何理解商贸企业的统一配送和分销网络建设？  西安专业网站制作公司有哪些,陕西省建行官方网站？  南阳网站制作公司推荐,小学电子版试卷去哪里找资源好？