微信小程序之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
})
}
})
运行：
续上：
把上面标注绿色部分的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
})
}
})
运行：
微信小程序教程系列
相关连接：http://blog.csdn.net/michael_ouyang/article/details/54700871
注册上线篇
------------------------------------------------------------
微信小程序之如何注册微信小程序
微信小程序之小程序上线
基础篇
------------------------------------------------------------
微信小程序的生命周期实例演示 —— 微信小程序教程系列（2）
微信小程序的动态修改视图层的数据 —— 微信小程序教程系列（3）
微信小程序的如何使用全局属性 —— 微信小程序教程系列（5）
微信小程序标题栏和导航栏的设置 —— 微信小程序教程系列（7）
微信小程序视图层的条件渲染 —— 微信小程序教程系列（10）
微信小程序视图层的列表渲染 —— 微信小程序教程系列（11）
微信小程序的百度地图获取地理位置 —— 微信小程序教程系列（15）
微信小程序使用百度api获取天气信息 —— 微信小程序教程系列（16）
微信小程序获取系统日期和时间 —— 微信小程序教程系列（17）
微信小程序之上拉加载和下拉刷新 —— 微信小程序教程系列（18）
实战篇
------------------------------------------------------------
微信小程序之上拉加载（分页加载）实例 —— 微信小程序实战系列（2）
微信小程序之仿android fragment之可滑动的底部导航栏实例 —— 微信小程序实战系列（4）
微信小程序之自定义toast实例 —— 微信小程序实战系列（6）
微信小程序之自定义抽屉菜单（从下拉出）实例 —— 微信小程序实战系列（7）
微信小程序之自定义模态弹窗（带动画）实例 —— 微信小程序实战系列（8）
电商篇
------------------------------------------------------------
微信小程序之仿淘宝分类入口 —— 微信小程序实战商城系列（2）
微信小程序之购物数量加减 —— 微信小程序实战商城系列（3）
微信小程序之商品属性分类 —— 微信小程序实战商城系列（4）
微信小程序之购物车 —— 微信小程序实战商城系列（5）
未完待续。。。
更多小程序的教程：http://blog.csdn.net/column/details/14653.html
微信小程序之wx:if视图层的条件渲染 —— 微信小程序教程系列（10）相关推荐
- 微信小程序之wx:if视图层的条件渲染
示例: wxml:使用view <!--index.wxml--> <button bindtap="EventHandle">按钮</button& ...
- 今天微信小程序发现wx.request不好使了,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2...
今天微信小程序发现wx.request不好使了,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2 查官方文档 解决方法 在 PowerShell中运行以下内容, 然后重启服务器 # Enab ...
- 小程序入门学习04--数据绑定、条件渲染、列表渲染
数据绑定 数据在本页面对应的脚本文件中定义 每个页面内置的内部状态变量webviewId记录是在几号webview中渲染 <view class="container"> ...
- 列表渲染 wx:key 的作用、条件渲染 wx:if 与 hidden 的区别
这是微信小程序踩坑系列的第三篇,想要了解更多关于微信小程序开发的那些事,欢迎关注我的<微信小程序>专栏. 前言 开发微信小程序离不开"页面渲染",对于初学者来说很难理解 ...
- 走进小程序【六】微信小程序架构之【视图层】万字详解
文章目录
- 微信小程序之顶部导航栏（选项卡）实例 —— 微信小程序实战系列（1）
需求:顶部导航栏 效果图: wxml: <!--导航条--> <view class="navbar"><text wx:for="{{na ...
- 微信小程序之微信登陆 —— 微信小程序教程系列（20）
简介: 微信登陆,在新建一个微信小程序Hello World项目的时候,就可以看到项目中出现了我们的微信头像,其实这个Hello World项目,就有一个简化版的微信登陆.只不过是,还没有写入到咱们自 ...
- 微信小程序使用百度api获取天气信息 —— 微信小程序教程系列（16）
之前已经介绍过,如何使用百度地图api来获取地理位置信息 微信小程序的百度地图获取地理位置 -- 微信小程序教程系列(15) 下面介绍使用百度api来获取天气信息. 1> 第一步:先到百度开放平 ...
- 微信小程序的网络请求 —— 微信小程序教程系列（14）
网络请求,基本上是必须的环节之一. 小程序提供了wx.request(object),与开发者的服务器实现数据交互的一个很重要的api. 最简单的用法如下(以GET请求为例) <view bin ...
最新文章
- WinCE CEDDK之Bus操作函数
- MySQL 数据库规范--调优篇(终结篇)
- 解决mysql java.sql.SQLException: The server time zone value‘XXXXXX' is unrecognized or represents...
- 利用OpenCV进行人脸识别
- HDU - 6203 ping ping ping(LCA+dfs序+线段树)
- 一文直击Graph Embedding图表示学习的原理及应用
- 3G助推智慧医疗 看病将更加“智能化”
- (王道408考研数据结构)第七章查找-第二节3：分块查找
- Existing lock /var/run/yum.pid: another copy is running as pid
- python布尔类型运算_Python bool类型和比较运算符（入门必读）
- js 基于函数伪造的方式实现继承
- 语义分割和实例分割_2019 语义分割指南
- EasyRecovery15中文版专业数据恢复软件
- 苏宁大数据怎么运营_苏宁智慧门店是什么？智慧门店是如何运作的？
- Vim 3 vimrc
- AMBA总线协议 之 APB总线协议
- 牛顿下山法(C++版)
- SG函数和SG定理的运用
- 把一个人的特点写具体作文_把一个人的特点写具体作文600字
- 关于机械臂的模仿学习