微信小程序 — wx:for和wx:if

1、wx:for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前
项的下标变量名默认为 index，数组当前项的变量名默认为 item

例子：

<!--WXML-->
<view wx:for="{{array}}"><view>下标为:{{index}}  当前值:{{item}}</view>
</view>

// pages/test/test.js
Page({data:{array:[1, 2, 3, 4, 5, 6, 7, 8, 9]
},
})

结果：

使用 wx:for-item="" 可以指定数组当前元素的变量名，
使用 wx:for-index="" 可以指定数组当前下标的变量名。
例如：
<view wx:for="{{array}}" wx:for-index="myindex"  wx:for-item="myitem">
自定义item和index名称为myitem和myindex。

2、wx:if

1、在框架中，使用 wx:if="" 来判断是否需要渲染该代码块。

2、也可以用 wx:elif 和 wx:else 来添加一个 else 块：
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

3、block wx:if
因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个<block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。<block wx:if="{{true}}"><view> view1 </view><view> view2 </view>
</block>
注意： <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

4、wx:if和hidden
因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，
因为它会确保条件块在切换时销毁或重新渲染。同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开
始局部渲染。相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，
用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。hidden=""的判断条件与wx:if=""相反。

微信小程序 — wx:for和wx:if相关推荐

微信小程序-API-数据缓存-wx.setStorageSync
微信小程序-API-数据缓存-wx.setStorageSync-2020-2-18 存 wx.setStorageSync('openid', openid); //将openid存入本地缓存取 ...
微信小程序设置请求超时wx.request等，简单易懂！
微信小程序设置请求超时wx.request等一.用到的方法: 个人理解,比较粗糙看不懂可以百度一下具体用法 new Promise:new了一个函数或者方法,可以被Promise.race等方法调 ...
微信小程序登录流程+介绍wx.login和auth.code2Session
微信小程序登录流程+介绍wx.login和auth.code2Session 几个核心API和核心字段 wx.login() 调用接口获取登录凭证(code) code2Session 登录凭证校验, ...
微信小程序 - 高级 - 深度实践 - wx:for 与 wx:for-items 与 wx:for-item 与 wx:key - 2 嵌套菜单的中文展示的方法 - 和官网不同
前一篇里面对wx:for 与 wx:for-items 与 wx:key的应用做了比较深入的探讨,这一节讲一个实际项目遇到的问题,和解决的办法. 1 简述DEMO的样式: 微信Demo里面的菜单嵌套的 ...
微信小程序如何自定义字体wx.loadFontFace
1.加载网络字体资源 Page({/*** 页面的初始数据*/data: {loaded :false},// 字体loadFontFace() {wx.loadFontFace({global:tr ...
微信小程序数据交互（wx.request）
对 wx.request 的理解微信小程序的设计模式基本依照于前端设计 html+css+js,关于与后端数据的交互,小程序不能像传统后端开发语言一样,能直接连接操作数据库.小程序更多的是像前端界面 ...
微信小程序api登录接口wx.login(OBJECT)
有些小程序可以直接使用而无需登录,例如,古诗.美图欣赏.美文等,这些微信小程序往往没有登录要求,只需要打开使用就可以了.但是,很多的小程序则往往需要登录,例如,在微信小程序里面您要发表评论.您要购买产 ...
微信小程序的条件判断wx:if、wx:elif以及for循环wx:for
1.wx:if和wx:elif 微信小程序中的条件判断与vue的v-if.v-else语法相似,其语法格式为: wx:if="{{条件表达式}}" wx:elif="{{ ...
微信小程序选择位置接口wx.chooseLocation
2019独角兽企业重金招聘Python工程师标准>>> 一.微信小程序位置接口wx.chooseLocation 本接口使用简单,用户用户通过腾讯地图选择一个位置. 本接口能获得选择 ...
微信小程序踩坑：wx.openDocument(Object object)打不开文件
官网: wx.openDocument(Object object) | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev ...

微信小程序 — wx:for和wx:if

1、wx:for

2、wx:if

微信小程序 — wx:for和wx:if相关推荐

最新文章

热门文章