Link:
Conditional rendering | WeChat open documentation (qq.com)
Take the newly created IfComp under the components file and the newly created features under the pages file as an example.
features.wxml
<if-comp />features.json
{
"usingComponents": {
"if-comp":"/components/IfComp/IfComp"
},
"navigationBarTitleText": "语法特点",
"navigationBarBackgroundColor": "#FFF",
"navigationBarTextStyle": "black"
}IfComp.wxss
.btn{
border: 1px solid #000;
background: #fafafa;
padding: 2px 6px;
}IfComp.wxml
<view wx:if="{
{flag}}">条件渲染例子</view>
<text class="btn" bindtap="toggle">改变flag</text>
<view wx:if="{
{num > 0}}">正数:{
{num}}</view>
<view wx:else>小于等于0:{
{num}}</view>
<text class="btn" bindtap="rand">随机数</text>
<view wx:if="{
{count >= 10}}">两位数：{
{count}}</view>
<view wx:elif="{
{count >= 5 && count < 10}}">个位数(5-9):{
{count}}</view>
<view wx:else>个位数(0-5):{
{count}}</view>
<text class="btn" bindtap="rand2">随机数2</text>
IfComp.js
Component({
data:{
flag:true,
num:0,
count:0
},
methods:{
toggle(){
console.log(this.data)
this.setData({
flag:!this.data.flag
})
},
rand(){
this.setData({
num:Math.random()-0.5
})
},
rand2(){
this.setData({
count:Math.floor(Math.random()*15)
})
}
}
})running result:
