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


Posted in Javascript onApril 19, 2017

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

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

使用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

  })

 }

})

运行:

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

续上:

把上面标注绿色部分的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>

运行:

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

续上:

增加一个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

  })

 }

})

运行:

编辑错误。

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

原因是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

  })

 }

})

运行:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
延时重复执行函数 lLoopRun.js
May 08 Javascript
JQuery打造PHP的AJAX表单提交实例
Nov 03 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
Aug 01 Javascript
Extjs表单常见验证小结
Mar 07 Javascript
分享10个原生JavaScript技巧
Apr 20 Javascript
JQuery ztree 异步加载实例讲解
Feb 25 Javascript
ES6新特征数字、数组、字符串
Oct 01 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
浅谈Angular路由守卫
Aug 26 Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
Vue组件全局注册实现警告框的实例详解
Jun 11 Javascript
NUXT SSR初级入门笔记(小结)
Dec 16 Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 #Javascript
vue2.0父子组件间通信的实现方法
Apr 19 #Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 #Javascript
微信小程序页面传值实例分析
Apr 19 #Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
Apr 19 #Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
Apr 19 #Javascript
angular-cli修改端口号【angular2】
Apr 19 #Javascript
You might like
1 Tube Radio
2021/03/02 无线电
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
如何在PHP中使用正则表达式进行查找替换
2013/06/13 PHP
个人写的PHP验证码生成类分享
2014/08/21 PHP
ThinkPHP实现简单登陆功能
2017/04/28 PHP
jquery 利用show和hidden实现级联菜单示例代码
2013/08/09 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
页面图片浮动左右滑动效果的简单实现案例
2014/02/10 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
angularJS Provider、factory、service详解及实例代码
2016/09/21 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
2017/05/20 jQuery
JS中使用media实现响应式布局
2017/08/04 Javascript
vue绑定class与行间样式style详解
2017/08/16 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
2018/08/27 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
[02:41]2015国际邀请赛中国区预选赛观战指南
2015/05/20 DOTA
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
Python库urllib与urllib2主要区别分析
2014/07/13 Python
python fabric实现远程部署
2017/01/05 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
python对XML文件的操作实现代码
2020/03/27 Python
Python如何根据时间序列数据作图
2020/05/12 Python
keras中模型训练class_weight,sample_weight区别说明
2020/05/23 Python
QML用PathView实现轮播图
2020/06/03 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
计算机应用与科学个人的自我评价
2013/11/15 职场文书
档案管理员岗位职责
2013/12/01 职场文书
大学军训自我鉴定
2013/12/15 职场文书
八年级历史教学反思
2014/01/10 职场文书
优秀员工推荐信
2014/05/10 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
分布式Redis Cluster集群搭建与Redis基本用法
2022/02/24 Redis