将 Blade If Else 转换为 Vue If Else

问题描述

我在 Blade 中有一个 if else 条件，我想将其转换为 Vue if else

@if (Auth::user()->avatar != null)
    <img src="{{ URL::to('storage/app/public') . '/' . Auth::user()->avatar }}"
        class="img-circle elevation-2" alt="User Image">
@endif
@if (Auth::user()->avatar == null)
    @if (Auth::user()->gender == 'Male')
        <img src="{{ URL::asset('public/bower_components/admin-lte/dist/img/fb-male.jpg') }}"
            class="img-circle elevation-2" alt="User Image">
    @else
        <img src="{{ URL::asset('public/bower_components/admin-lte/dist/img/female-fb.jpg') }}"
            class="img-circle elevation-2" alt="User Image">
    @endif
@endif

解决方法

要转换刀片文件中的 @if 分支，请将 <template> 与 v-if/v-else 结合使用：

<template v-if="{{ Auth::user()->avatar != null }}">
    <img src="{{ URL::to('storage/app/public') . '/' . Auth::user()->avatar }}"
        class="img-circle elevation-2" alt="User Image">
</template>
<template v-else>
    <template v-if="{{ Auth::user()->gender == 'Male' }}">
        <img src="{{ URL::asset('public/bower_components/admin-lte/dist/img/fb-male.jpg') }}"
            class="img-circle elevation-2" alt="User Image">
    </template>
    <template v-else>
        <img src="{{ URL::asset('public/bower_components/admin-lte/dist/img/female-fb.jpg') }}"
            class="img-circle elevation-2" alt="User Image">
    </template>
</template>