如何使用微信小程序wx:if控制元素显示和隐藏

如何使用微信小程序wx:if控制元素显示和隐藏

在微信小程序中，包含了很多指令，有wx:for、wx:if等。其中，wx:if是用来判断某个条件是否成立，如果返回值为true，则渲染这个元素，否则不渲染；还可以使用wx:if显示或隐藏一个元素，操作如下：

第一步，双击打开微信小程序开发工具，在指定的文件夹新建wxml文件，然后插入一个，如下图所示：

第二步，在外层的view元素添加一个wx:if，绑定一个变量isShow，如下图所示：

第三步，接着在对应的JavaScript文件的data对象，添加一个变量isShow，设置值为false，如下图所示：

第四步，保存代码并在手机模拟器上预览效果，结果发现不显示任何内容，如下图所示：

第五步，接着将isShow变量由false改为true，并保存代码查看效果，如下图所示：

第六步，在模拟器上预览效果，发现出现了文字内容，说明wx:if起到了作用，如下图所示：