首页 > 解决方案 > 将 Blade If Else 转换为 Vue If Else

问题描述

我在 Blade 中有一个if else条件,我想将其转换为 Vueif 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

标签: laravelvue.jslaravel-blade

解决方案


要转换@if刀片文件中的分支,请使用<template>s 和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>

推荐阅读