微信小程序wx:if的使用和wx:for的页面渲染

if条件判断,当条件为真时,渲染显示页面,为假时,不渲染
使用方法:

1 在js里面定义一个值,为true或者false
data{
isActive:true
}
2 在页面判断 wx:if="{{isActive}}" bindtap=“yy”
3 可以通过改变isActive的值来决定页面是否渲染
yy(){
vae that = this;
that.setData({
isActive:false
})
}

通过三目运算符决定样式的显示隐藏
class="{{isActive? ‘样式1’:‘样式2’}}"

for循环,循环数组并渲染到页面
使用方法
1 在js里面设置数组存储数据
data{
arr[
{id:1, name:“张三”,age:18},
{id:1, name:“小红”,age:18},
],
}
2 在页面进行循环渲染
wx:for="{{arr}}" wx:key=“index” {{item.id}} {{item.age}} {{item.name}}

你可能感兴趣的:(笔记)