在框架中,我们用wx:if="{{condition}}"
来判断是否需要渲染该代码块:
<view wx:if="{{condition}}"> True </view>
也可以用wx:elif
和wx:else
来添加一个else块:
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
因为wx:if
是一个控制属性,需要将它添加到一个标签上。但是如果我们想一次性判断多个组件标签,我们可以使用一个<block/>
标签将多个组件包装起来,并在上边使用wx:if
控制属性。
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
注意:<block/>
并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。
wxml:使用view
<!--index.wxml-->
<button bindtap="EventHandle">按钮</button>
<!-- wx:if -->
<view wx:if="{{boolean==true}}">
<view class="bg_black"></view>
</view>
<view wx:elif="{{boolean==false}}">
<view class="bg_red"></view>
</view>
wxss:
.bg_black {
height: 200rpx;
background: lightskyblue;
}
.bg_red {
height: 200rpx;
background: lightpink;
}
js:
// index.js
Page({
data: {
boolean:false
},
EventHandle: function(){
var bol = this.data.boolean;
this.setData({
boolean: !bol
})
}
})
wx:if
vshidden
因为wx:if
之中的模板也可能包含数据绑定,所以当wx:if
的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。
同时wx:if
也是惰性的,如果在初始渲染条件为false
,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。
相比之下,hidden
就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。
一般来说,wx:if
有更高的切换消耗而hidden
有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用hidden
更好,如果在运行时条件不大可能改变则wx:if
较好。
绘图接口和方法canvasContext.stroke定义画出当前路径的边框。默认颜色色为黑色。Tip:stroke()描绘的的路径是从beginPath()开始...
绘图接口和方法canvasContext.rotate定义以原点为中心,原点可以用 translate方法修改。顺时针旋转当前坐标轴。多次调用rotate,...
wx.createSelectorQuery()基础库 1.4.0 开始支持,低版本需做兼容处理返回一个SelectorQuery对象实例。可以在这个实例上使用sele...
wx.authorize(OBJECT)基础库 1.2.0 开始支持,低版本需做兼容处理部分接口需要获得同意后才能调用。此类接口调用时,如果用户未...
目录11.1. 简介11.2. 索引类型11.3. 多列索引11.4. 索引和ORDER BY11.5. 组合多个索引11.6. 唯一索引11.7. 表达式索引11.8. 部分...
ALTER VIEW — 更改一个视图的定义大纲ALTER VIEW [ IF EXISTS ] name ALTER [ COLUMN ] column_name SET DEFAULT expressionALT...
COMMIT — 提交当前事务大纲COMMIT [ WORK | TRANSACTION ] [ AND [ NO ] CHAIN ]描述 COMMIT提交当前事务。所有由该 事务所作的...
CREATE DATABASE — 创建一个新数据库大纲CREATE DATABASE name[ [ WITH ] [ OWNER [=] user_name ] [ TEMPLATE [=] template ] ...