Vueドキュメントでのプログレスバーコンポーネントの実装方法

Vue は、最新のシングルページ アプリケーション (SPA) を構築するための人気のある JavaScript フレームワークです。一般的な UI コンポーネントの 1 つは進行状況バーです。 Vue のドキュメントには、このプログレス バー コンポーネントを実装するためのさまざまな方法が記載されており、そのうちの 1 つを以下に紹介します。

まず、Vue コンポーネントの template で、<div> 要素を使用してプログレス バーを含め、そのスタイルとプロパティを次のように設定する必要があります。

<template>
  <div class="progress-bar">
    <div class="progress" :style="{ width: progress + '%' }"></div>
  </div>
</template>

このコードでは、.progress-bar は外側の div 要素のクラス名で、そのスタイル .progress を設定するために使用されます。 は、実際の進行状況バーの長さを表すために使用される内部 div 要素のクラス名です。その幅は、## を使用して progress '%' に設定されます。 #:style 属性。 progress は、進行状況バーのパーセンテージを制御するために使用されるデータ属性です。

次に、Vue コンポーネントの

script で、プログレス バー コンポーネントの関連ロジックを定義する必要があります。まず、data オブジェクトで progress データ属性を定義します。初期値は 0 です。コードは次のとおりです:

<script>
export default {
  data() {
    return {
      progress: 0
    };
  }
};
</script>

次に、 Vue ライフ サイクル フック関数。

mounted 関数は、プログレス バーの自動処理を開始します。コードは次のとおりです。

<script>
export default {
  data() {
    return {
      progress: 0
    };
  },
  mounted() {
    setInterval(() => {
      this.progress += 10;
      if (this.progress > 100) {
        this.progress = 0;
      }
    }, 1000);
  }
};
</script>

このコードでは、

setInterval 関数プログレスバーの自動更新を設定するために使用されます。 1 秒ごとに、progress データ属性が 10 ずつ増加し、100% に達したかどうかを確認し、100% に達した場合は、プログレス バーを 0 にリセットします。

最後に、