使用@class指令可動態(tài)應(yīng)用CSS類，例如：1. 用@class結(jié)合條件變量為活動菜單項(xiàng)添加active類；2. 使用三元運(yùn)算符在class屬性中內(nèi)聯(lián)判斷樣式；3. 通過style屬性結(jié)合三元運(yùn)算符或PHP變量動態(tài)設(shè)置內(nèi)聯(lián)樣式；4. 在Blade組件中傳遞並合併條件類；5. 將復(fù)雜邏輯封裝到模型屬性或輔助函數(shù)中，如通過getStatusClassAttribute方法返回狀態(tài)對應(yīng)樣式類，最終在Blade中簡潔調(diào)用，保持模板清晰且可維護(hù)。

In Laravel's Blade templating engine, you can dynamically apply CSS classes or inline styles based on conditions — which is super useful for things like active navigation links, form validation states, or UI toggles. Here's how to do it cleanly and efficiently.

1. Using @class for Conditional Classes

Laravel provides the @class directive (available in Laravel 7 ) to dynamically manage CSS classes. It merges static and conditional classes, automatically handling spacing.

Example: Active menu item

 @php
    $isActive = request()->is('dashboard');
@endphp

<div @class([
    &#39;nav-link&#39;,
    &#39;active&#39; => $isActive,
    &#39;disabled&#39; => !$user->isActive(),
])>
    Dashboard
</div>

This compiles to:

 <div class="nav-link active">Dashboard</div>

Only classes with true values are included.

You can also mix strings and conditionals:

 @component('alert', ['type' => 'error'])
    @class(["alert", "alert-{$type}" => $type])
@endcomponent

2. Using Ternary Operators with class=""

If you're not using @class , or need a quick inline solution, use standard HTML with ternary logic:

 <li class="{{ request()->is(&#39;profile&#39;) ? &#39;active&#39; : &#39;&#39; }}">
    <a href="/profile">Profile</a>
</li>

Or with multiple conditions:

 <div class="{{ $hasError ? &#39;text-red-500&#39; : &#39;text-gray-800&#39; }} {{ $isBold ? &#39;font-bold&#39; : &#39;&#39; }}">
    Some text
</div>

This works fine for simple cases but can get messy with many classes.

3. Conditional Inline Styles with

You can also conditionally apply inline styles:

 <div style="{{ $isUrgent ? &#39;color: red; font-weight: bold;&#39; : &#39;color: gray;&#39; }}">
    {{ $message }}
</div>

Or build the style dynamically:

 @php
    $styles = [];
    if ($isLarge) $styles[] = 'font-size: 24px';
    if ($isCentered) $styles[] = 'text-align: center';
@endphp

<p style="{{ implode(&#39;; &#39;, $styles) }}">
    Styled paragraph
</p>

4. Combining Dynamic Classes with Components

When using Blade components, you can pass classes and conditionally merge them:

 <x-button :class="[&#39;w-full&#39; => $block]" />

Inside the component:

 <button class="{{ $class ?? &#39;&#39; }} px-4 py-2 bg-blue-500">
    {{ $slot }}
</button>

This lets users extend or override classes while preserving internal logic.

Bonus: Use Helper Functions or Accessors

For complex logic, consider moving class logic into methods:

In your model:

 public function getStatusClassAttribute()
{
    return match($this->status) {
        'active' => 'text-green-500',
        'pending' => 'text-yellow-500',
        'inactive' => 'text-gray-400',
    };
}

In Blade:

 <span class="{{ $user->status_class }}">
    {{ $user->status }}
</span>

Basically, use @class when you can — it's clean and built for this. For styles or simpler cases, inline ternaries work fine. Keep logic out of templates when it gets complex, and lean on PHP attributes or helpers.

以上是如何在Laravel中使用有條件的類和樣式？的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！