加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

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

发布时间:2020-12-14 20:17:47 所属栏目:资源 来源:网络整理
导读:本教程为大家分享了使用wx:if进行视图层的条件渲染,供大家参考,具体内容如下 使用wx:if进行视图层的条件渲染 示例: wxml:使用view wxss: } js: Page({ data: { boolean:false },EventHandle: function(){ var bol = this.data.boolean; this.setData({

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

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

示例:

wxml:使用view

wxss:

}

js:

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

})

}

})

运行:

续上:

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

wxml:使用block

运行:

续上:

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

wxml:

index.js:

var bol = this.data.boolean;

this.setData({

boolean: !bol

})

}

})

运行:

编辑错误。

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

续上:

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

wxml:

wxss:

background: lightpink;

}

index.js:

this.setData({
boolean: !bol

})

}

})

运行:

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读