如何在Laravel Blade页面中使用多条件if语句控制数据展示

你的代码逻辑已经基本符合需求，但可以做一些可读性和规范性优化。以下是调整后的代码及说明：

核心逻辑说明 #

条件判断必须从最严格的场景开始，再逐步放宽，避免逻辑冲突：

• 优先检查三个变量均不为null的情况
• 再处理仅$users和$user_psb不为null的场景（此时$businesses必然为null，已被第一个条件过滤）
• 接着处理仅$users和$businesses不为null的场景（此时$user_psb必然为null）
• 最后覆盖所有其他情况，显示默认进度条

优化后的代码 #

<!--begin::Progress-->
{{-- 条件1：三个变量均不为null --}}
@if (!is_null($users) && !is_null($businesses) && !is_null($user_psb))
    <div class="d-flex align-items-center w-200px w-sm-300px flex-column mt-3">
        <div class="d-flex justify-content-between w-100 mt-auto mb-2">
            <span class="fw-bold fs-6 text-gray-400">Profile Completion</span>
            <span class="fw-bolder fs-6">100%</span>
        </div>
        <div class="h-5px mx-3 w-100 bg-light mb-3">
            <div class="bg-success rounded h-5px" role="progressbar" style="width:100%"
                aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
    </div>
{{-- 条件2：仅$users和$user_psb不为null --}}
@elseif (!is_null($users) && !is_null($user_psb))
    <div class="d-flex align-items-center w-200px w-sm-300px flex-column mt-3">
        <div class="d-flex justify-content-between w-100 mt-auto mb-2">
            <span class="fw-bold fs-6 text-gray-400">Profile Completion</span>
            <span class="fw-bolder fs-6">60%</span>
        </div>
        <div class="h-5px mx-3 w-100 bg-light mb-3">
            <div class="bg-warning rounded h-5px" role="progressbar" style="width:60%"
                aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
    </div>
{{-- 条件3：仅$users和$businesses不为null --}}
@elseif (!is_null($users) && !is_null($businesses))
    <div class="d-flex align-items-center w-200px w-sm-300px flex-column mt-3">
        <div class="d-flex justify-content-between w-100 mt-auto mb-2">
            <span class="fw-bold fs-6 text-gray-400">Profile Completion</span>
            <span class="fw-bolder fs-6">80%</span>
        </div>
        <div class="h-5px mx-3 w-100 bg-light mb-3">
            <div class="bg-primary rounded h-5px" role="progressbar" style="width:80%"
                aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
    </div>
{{-- 默认情况：其他所有场景 --}}
@else
    <div class="d-flex align-items-center w-200px w-sm-300px flex-column mt-3">
        <div class="d-flex justify-content-between w-100 mt-auto mb-2">
            <span class="fw-bold fs-6 text-gray-400">Profile Completion</span>
            <span class="fw-bolder fs-6">40%</span>
        </div>
        <div class="h-5px mx-3 w-100 bg-light mb-3">
            <div class="bg-danger rounded h-5px" role="progressbar" style="width: 40%"
                aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
    </div>
@endif
<!--end::Progress-->

优化点说明 #

1. 规范空值检查：用!is_null()替代!= null，符合PHP/Laravel的代码规范，可读性更强
2. 修复无障碍属性：将aria-valuenow的值改为与进度条百分比一致，符合WCAG无障碍标准
3. 清晰注释：明确标注每个条件对应的场景，降低后续维护成本

内容的提问来源于stack exchange，提问作者Nakvi