wx:if 与 hidden 都可以控制微信小程序中元素的显示与否。

区别:

wx:if 是遇 true 显示,hidden 是遇 false 显示。

wx:if 在隐藏的时候不渲染,而 hidden 在隐藏时仍然渲染,只是不呈现。

所以如果频繁切换的话,用 wx:if 将会消耗更多资源,因为每次呈现的时候他都会渲染,每次隐藏的时候,他都会销毁。

如果切换并不频繁的话,用 wx:if 相对来说较好些,因为它会避免初始就一下渲染那么多。

wxml:

<view>
<text>pages/testmodule/testmodule.wxml</text>
<view wx:if="{{showif}}">wx:if测试</view>
<view hidden='{{showhidden}}'>hidden显示隐藏测试</view>
<button bindtap='handleIf'>改变if</button>
<button bindtap='handleHidden'>改变hidden</button>
</view>

js:

Page({

  /**
* 页面的初始数据
*/
data: {
showif: true,
showhidden: false
}, handleIf(){
this.setData({
showif: !this.data.showif
});
},
handleHidden(){
this.setData({
showhidden: !this.data.showhidden
});
}
)}

官网文档:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/conditional.html

【微信小程序】 wx:if 与 hidden(隐藏元素)区别的更多相关文章

  1. 转载:【微信小程序】 wx:if 与 hidden(隐藏元素)区别

    条件渲染 顾名思义所谓的条件渲染,就是通过条件来判断是否需要渲染该代码块.条件渲染主要是用到wx:if 和 block wx:if 这两个,第一个相信好理解,第二个是在block里面进行条件渲染,这里 ...

  2. 微信小程序wx.showActionSheet调用客服信息功能

    微信小程序wx.showActionSheet调用客服消息功能 官方文档的代码: wx.showActionSheet({ itemList: ['A', 'B', 'C'], success (re ...

  3. 微信小程序wx.request接口

    微信小程序wx.request接口 wx.request是小程序客户端与服务器端交互的接口 HTTPS 请求 一个微信小程序,只能同时(同时不能大于5个)有5个网络请求 wx.request(OBJE ...

  4. 监控微信小程序wx.request请求失败

    在微信小程序里,与后台服务器交互的主要接口函数是wx.request(),用于发起 HTTPS 网络请求.其重要性不言而喻.然而,却经常遇到请求失败的问题,笔者特意谷歌"wx.request ...

  5. 微信小程序wx:for隐藏遍历的最后一个元素

    微信小程序开发时有时会需要从wx:for遍历的元素中选取最后一个来进行相关操作,以下方法以隐藏最后一个元素为例 index==list.length-1 通过获取列表的总长度减一来得到最后一个元素是最 ...

  6. 微信小程序wx.getLocation()获取经纬度及JavaScript SDK调用腾讯地图API获取某一类地址

    简介 腾讯位置服务为微信小程序提供了基础的标点能力.线和圆的绘制接口等地图组件和位置展示.地图选点等地图API位置服务能力支持,使得开发者可以自由地实现自己的微信小程序产品. 在此基础上,腾讯位置服务 ...

  7. 微信小程序wx.chooseImage和wx.previewImage的综合使用(图片上传可以限制个数)

    本例从微信小程序的组件扒下来的. WXML: <view class="weui-cell"> <view class="weui-cell__bd&q ...

  8. 微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决

    微信小程序上传图片的时候,如果是多图片上传,一般都是直接用一个循环进行wx.uploadFile 这个在电脑上面测试与苹果手机上面都不会有什么问题 但当用安卓测试的时候,你会发现小程序会提示一个the ...

  9. 微信小程序wx.navigateTo层叠5次限制,特殊情况的建议

    小程序页面的实例使用栈的数据结构存储,栈内元素最多5个(换一种方式说,就是用户最多能点击5次返回),微信小程序能在栈中相对高层某个页面调用其他相对低层的页面实例的方法. 小程序三种页面跳转API 的区 ...

随机推荐

  1. idea的一些好用的第三方插件

    用了Idea真的回不去Eclipse了,安利一波. 这里记录一些好用的插件. GenerateAllSetter 这个插件是用在写代码的时候调用Setter的时候能一次性把实体类中的所有Setter方 ...

  2. Eclipse 查看 WebService 服务请求和响应消息

    每个WebService 对入参和返参都是有自己的要求的:别人调用我的WebService,需要按照我的要求进行传参.当我返回数据时,我也得告诉别人,我的返回数据是怎样组织的,方便别人读取. 那怎样查 ...

  3. CodeSmith如何生成实体类 ,完善版

    <%-- Name: Database Table Properties Author: Paul Welter Description: Create a list of properties ...

  4. MySQL系列:性能优化

    1. 优化简介 MySQL性能优化包括:查询优化.数据库结构优化.MySQL服务器优化等. 2. 查询优化 2.1 分析查询语句 MySQL提供EXPLAIN和DESCRIBE,用来分析查询语句. E ...

  5. angular 4 router传递数据三种方法

    1.在查询参数中传递数据 <a  [routerLink]="['/product']" [queryParams]="{id:1,name:'dongian'}& ...

  6. Python——Django-manage.py的内容

    在项目的根目录下(也就是有manage.py的那个目录),运行: python3 manage.py runserver IP:端口--> 在指定的IP和端口启动 python3 manage. ...

  7. 爬虫,基于request,bs4 的简单实例整合

    简单爬虫示例 爬取抽屉,以及自动登陆抽屉点赞 先查看首页拿到cookie,然后登陆要携带首页拿到的 cookie 才可以通过验证 """""" ...

  8. 【Linux网络编程】TCP网络编程中connect()、listen()和accept()三者之间的关系

    [Linux网络编程]TCP网络编程中connect().listen()和accept()三者之间的关系 基于 TCP 的网络编程开发分为服务器端和客户端两部分,常见的核心步骤和流程如下: conn ...

  9. java poi 操作ppt

    java poi 操作ppt 可以参考: https://www.w3cschool.cn/apache_poi_ppt/apache_poi_ppt_installation.html http:/ ...

  10. 第十节:基于MVC5+Unity+EF+Log4Net的基础结构搭建

    一. 前言 本节继续探讨一种新的框架搭建模式,框架的结构划分和上一节是相同的,本节IOC框架换成了Unity,并且采用构造函数注入的方式,另外服务层的封装模式也发生了变化,下面将详细的进行探讨. (一 ...