时间戳

首页 > 解决方案 > 在 vue.js 的上下文中，当资源无法从 mustache 中的 API 加载时如何不显示任何内容

javascript - 在 vue.js 的上下文中，当资源无法从 mustache 中的 API 加载时如何不显示任何内容

问题描述

我是 Vue 的新手，所以我想知道当资源无法从 API 加载时如何显示空白屏幕。下面是我在程序中使用的小胡子，其中变量来自 API。

<p class="text-2xl text-success">
    {{'+' + avgSwing.overall_performance + '%'}}%
</p>

所以当从 API 加载资源时，得到的输出是：

+36.14%

当资源从 API 加载失败时，得到的输出是：

+undefined%

所以，我期待一个空白屏幕而不是+undefined%，请帮我解决这个问题。谢谢你。

标签： javascriptvue.jsvue-componentmustache

解决方案

您可以这样做v-if以有条件地<p>仅在 API 有响应时显示：

<p class="text-2xl text-success" v-if="avgSwing">
   {{ '+' + avgSwing.overall_performance + '%' }}
</p>

如果avgSwing未定义，则<p>标签不会添加到 DOM。

推荐阅读