注意:if和else两个元素必须挨着,中间不能有其他元素
1、data.wxml
<!--pages/js/data.wxml-->
<view style="padding-bottom: 20px;">--------- if条件判断 -----------</view>
<view>
<text space="nbsp">姓名 | </text>
<text space="nbsp">性别 | </text>
<text space="nbsp">成绩 | </text>
<text space="nbsp">是否及格</text>
</view>
<view>-----------------------------</view>
<view>
<text space="nbsp">{{obj1.name}} | </text>
<text space="nbsp">{{obj1.sex}} | </text>
<text space="nbsp">{{obj1.number}} | </text>
<text style="color:red;" space="nbsp" wx:if="{{obj1.number<60}}">不及格</text>
<text style="color:rgb(3, 151, 16);" space="nbsp" wx:else>及格</text>
</view>
<view style="padding-bottom: 20px;">
<text space="nbsp">{{obj2.name}} | </text>
<text space="nbsp">{{obj2.sex}} | </text>
<text space="nbsp">{{obj2.number}} | </text>
<text style="color:red;" space="nbsp" wx:if="{{obj2.number<60}}">不及格</text>
<text style="color:rgb(3, 151, 16);" space="nbsp" wx:else>及格</text>
</view>
<view style="padding-bottom: 20px;">---- 【通过block实现,只显示及格的人】 ----</view>
<block wx:if="{{obj2.number<60}}">
<view>
<text space="nbsp">{{obj1.name}} | </text>
<text space="nbsp">{{obj1.sex}} | </text>
<text space="nbsp">{{obj1.number}} | </text>
<text style="color:red;" space="nbsp" wx:if="{{obj1.number<60}}">不及格</text>
<text style="color:rgb(3, 151, 16);" space="nbsp" wx:else>及格</text>
</view>
</block>
<block wx:if="{{obj2.number>=60}}">
<view style="padding-bottom: 20px;">
<text space="nbsp">{{obj2.name}} | </text>
<text space="nbsp">{{obj2.sex}} | </text>
<text space="nbsp">{{obj2.number}} | </text>
<text style="color:red;" space="nbsp" wx:if="{{obj2.number<60}}">不及格</text>
<text style="color:rgb(3, 151, 16);" space="nbsp" wx:else>及格</text>
</view>
</block>
2、data.js
// pages/js/data.js
Page({
/**
* 页面的初始数据
*/
data: {
obj1:{"name":"张飞","sex":"男","number":50},
obj2:{"name":"貂蝉","sex":"女","number":80}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})