Question

问题是两个div都显示加载。我尝试仅在一个上使用v-cloak，但它不起作用。如果我穿上父div，那么它隐藏起来并不好看。任何建议如何在页面加载时只显示一个div，但没有v-cloak？

<div class="center_image" v-if="avatarImageSet">
    <div class="checked">
        <div class="seller_image {{ in_role('BusinessUsers') ? 'agency' : '' }}">
            <img src="{{ home_asset('img/very_big_user_icon.png') }}" alt="" />
        </div>
        <div class="check_profile business">
            <i class="fa fa-check"></i>
        </div>
    </div>
</div>
<div class="center_image" v-else>
    <div class="checked">
        <div class="seller_image">
            <img v-bind:src="user_credentials.avatar" alt="Avatar"/>
        </div>
        <div class="check_profile business">
            <i class="fa fa-check"></i>
        </div>
    </div>
</div>

Answer 1

由于代码中存在其他错误，可能会发生这种情况，例如：

<img src="{{ home_asset('img/very_big_user_icon.png') }}" alt="" />，你应该使用v-bind和src
class="seller_image {{ in_role('BusinessUsers') ? 'agency' : '' }}"您应该在这里使用动态类绑定。

参见修改后的代码：

<div class="center_image" v-if="avatarImageSet">
    <div class="checked">
        <div class="seller_image" :class="{`yourclass`: in_role('BusinessUsers') === 'agency'}">
            <img :src="home_asset('img/very_big_user_icon.png')" alt="" />
        </div>
        <div class="check_profile business">
            <i class="fa fa-check"></i>
        </div>
    </div>
</div>
<div class="center_image" v-else>
    <div class="checked">
        <div class="seller_image">
            <img v-bind:src="user_credentials.avatar" alt="Avatar"/>
        </div>
        <div class="check_profile business">
            <i class="fa fa-check"></i>
        </div>
    </div>
</div>

页面加载时是否显示v-if和v-else？

1 个答案: