时间戳

首页 > 解决方案 > 加载页面时隐藏文本

html - 加载页面时隐藏文本

问题描述

我试图在页面加载时隐藏一个 div。每当页面加载时，我希望某些文本根据 API 调用的结果出现或消失。

原谅菜鸟的问题，总的来说，我是 TypeScript 和 Vue 的新手。

这是我的代码的样子：

    <div class="row" v-if="!isHidden">
      <p>
        Your file is available!
      </p>
    </div>

虽然我的 TypeScript 看起来像这样：

@Component
export default class File extends Vue {

  @Prop()
  private isHidden: boolean;

  private async init(): Promise<void> {
    this.File = [];
    this.isHidden = true;

    this.File = await API.file.downloadFile(
    );
  
    if (this.File !== ['']) {
      this.isHidden = false;
    }

上面的 TypeScript 在页面加载时调用 API。this.File每当不返回空时，我该怎么做才能显示文本String[]？

标签： htmltypescript

解决方案

如果您使用的是 vuex，您可以在 vue 组件的数据部分或您的状态中创建一个新属性。

调用 api 时，将新属性设置为“正在加载”。当api返回数据时，如果是有效数据，将你的属性设置为'valid'，如果是无效的，设置为'invalid'。您可以将其他字符串用于其他情况。然后，您可以根据属性中的字符串更改消息，或者根据需要隐藏数据。

推荐阅读