将 Blade If Else 转换为 Vue If Else答案

【问题标题】：Convert Blade If Else to Vue If Else将 Blade If Else 转换为 Vue If Else
【发布时间】：2021-08-30 19:57:02
【问题描述】：

我在 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

【问题讨论】：

StackOverflow 不是免费的写代码服务，请查看how to write a good question
您应该将数据存储在 vue 数据变量中，并使用 v-if 和 v-else 来实现 vue 条件。
@Joseph 不需要您的回答。谢谢！我得到了另一个答案

标签： laravel vue.js laravel-blade

【解决方案1】：

要转换刀片文件中的@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>

【讨论】：