【小程序】wxml中通过if条件语句判断js数据（图文+完整代码）

注意：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 () {

    }
})