微信小程序教程系列之视图层的条件渲染(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 相关文章推荐
tbody元素支持嵌套的注意方法
Mar 24 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
JS、CSS加载中的小问题探讨
Nov 26 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
Jun 08 Javascript
javascript弹出拖动窗口
Aug 11 Javascript
基于JS代码实现实时显示系统时间
Jun 16 Javascript
详解JavaScript权威指南之对象
Sep 27 Javascript
Vue shopCart 组件开发详解
Jan 26 Javascript
layui的table单击行勾选checkbox功能方法
Aug 14 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
JavaScript模板引擎原理与用法详解
Dec 24 Javascript
JavaScript实现鼠标经过表格某行时此行变色
Nov 20 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
PHP Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
CI框架在CLI下执行占用内存过大问题的解决方法
2014/06/17 PHP
PHP+JS实现的商品秒杀倒计时用法示例
2016/11/15 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
jQuery中阻止冒泡事件的方法介绍
2014/04/12 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
谷歌浏览器调试JavaScript小技巧
2014/12/29 Javascript
js实现网页抽奖实例
2015/08/05 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
js 监控iframe URL的变化实例代码
2017/07/12 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
2017/11/15 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
Python字符串和文件操作常用函数分析
2015/04/08 Python
python实现将内容分行输出
2015/11/05 Python
python实现QQ批量登录功能
2019/06/19 Python
python issubclass 和 isinstance函数
2019/07/25 Python
关于Python中的向量相加和numpy中的向量相加效率对比
2019/08/26 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
软件缺陷的分类都有哪些
2014/08/22 面试题
提高EJB性能都有哪些技巧
2012/03/25 面试题
大学生入党思想汇报
2014/01/01 职场文书
元旦晚会策划方案
2014/02/18 职场文书
宣传部部长竞选演讲稿
2014/04/26 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
安全生产感想
2015/08/07 职场文书
婚庆答谢词大全
2015/09/29 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书
详解PHP Swoole与TCP三次握手
2021/05/27 PHP
详解MindSpore自定义模型损失函数
2021/06/30 Python
Python使用psutil库对系统数据进行采集监控的方法
2021/08/23 Python
element tree树形组件回显数据问题解决
2022/08/14 Javascript