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

标签:活动介绍    日期:2018-12-29 10:00    录入:美娱国际平台注册    浏览:

  

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

  

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

  

  
  

  

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

  

示例:  

  

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

  
  
                    
  
  

运行:  

  

  
  

  

续上:  

  

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

  

wxml:  

  
  
          内容:{{item}}      无内容    
  
  

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:  

  
  
            内容:{{item}}        无内容    
  
  

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  })  }  })  
  
  

运行:  

  

  
  

  

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

  
  

★★★小编:美娱国际 整理文章,欢迎大家转载 ★★★
相关文章阅读