微信小程序条件判断学习示例

 时间:2026-02-15 17:26:57

1、打开小程序开发工具,在项目中新建mypage文件夹,在文件夹下新建page名为mypage,并将次page在app.json中设成第一页面

微信小程序条件判断学习示例

2、在mypage.wxml文件,添加代码如下:

<view>

<text wx:if='{{true}}'>true时可见</text>

</view>

编译运行程序,因为wx:if='{{true}}'所以能看到内容

微信小程序条件判断学习示例

3、在mypage.wxml文件,修改代码如下:

<view>

<text wx:if='{{false}}'>true时可见</text>

</view>

编译运行程序,因为wx:if='{{false}}'所以不能看到内容

微信小程序条件判断学习示例

4、通过数据绑定形式,设置可见性,增加一个button按钮用来切换显示,

mypage.wxml代码如下:

<view>

<text wx:if='{{show}}'>true时可见</text>

<text wx:else>false时可见</text>

</view>

<button bindtap='clickHandler'>点我切换</button>

微信小程序条件判断学习示例

5、在mypage.js文件绑定数据,代码如下:

data: {

show:"true",

},

微信小程序条件判断学习示例

6、在mypage.js文件绑定按钮点击事件,更改data中show的值,代码如下:

clickHandler:function(){

var isShow = this.data.show;

this.setData({show:!isShow})

}

也可以简写:

this.setData({show:!this.data.show})

但是不能用this.show直接获取值,这也和vue不同

微信小程序条件判断学习示例

7、编译运行代码,点击按钮就可以切换显示了

微信小程序条件判断学习示例

微信小程序条件判断学习示例

  • 补血吃什么好,不是人人都知道
  • 酒喝多了胃难受怎么办
  • 喝茶的四个坏习惯请立即停止,容易伤身
  • 紫叶李的管理时需要注意什么?
  • 家常清蒸金针菇怎么做好吃
  • 热门搜索
    金针菇的做法大全 怎么恢复微信聊天记录 铁锅炖鱼的做法 鸭血粉丝汤的做法 疙瘩汤的家常做法 过敏性鼻炎怎么治 鸭胸肉的做法大全 血压偏高怎么调理 胸口中间疼是怎么回事 羊肉汤做法