Vueは複数のカウントダウンを同時に設定する機能を実装しています

<div class="home">
    <t本文>
      <tr v-for="(item, index) in バーゲングッズ" :key="index">
        <td v-text="item.down + Djs_timeList(item.countDown)"></td>
      </tr>
    </tbody>
</div>

エクスポートデフォルト{
  データ（） {
    戻る {
      お買い得商品: [],
      合計: 0,
      ページ: 1,
      サーバー時間: 0,
      タイマー: ""
      // ホストUrl: this.$hostUrl
    };
  },
  //データの初期化に使用 created: function() {
    // データを取得する this.goods();
    // サーバー時間を取得します this.findServiceTime();
  },
  メソッド: {
    商品: 関数() {
      var _this = これ;
      _this.$axios({
        url: "goods/pageGoods",
        データ： {
          現在: -1,
          アクティビティステータス: "",
          制限: -1、
          ステータス: 「セール」
        },
        成功: 応答 => {
          _this.bargainGoods = レスポンス.items;
          _this.Djs_time();//タイマーを呼び出す//以下は、ページ表示に使用される、私が返したバックグラウンドデータの開始時間と終了時間です。if (_this.bargainGoods.length != 0) {
            (var key in _this.bargainGoods) {
              var 時間 = 0;
              var 開始時刻 = 0;
              _this.bargainGoods[キー] != null の場合 {
                _this.bargainGoods[キー].countDown = "";
                _this.bargainGoods[キー].down = "";

                // 終了時間 hour = _this.bargainGoods[key].overTime;
                開始時刻 = _this.bargainGoods[キー].activityStartTime;
                hour = hour.replace(/-/g, "/");
                hour = 新しい Date(hour).getTime();
                startime = startime.replace(/-/g, "/");
                スタータイム = 新しい日付(スタータイム).getTime();
                // 終了時刻が現在の時刻より大きい場合 if (hour > _this.serverTime && startime < _this.serverTime) {
                  var hourtime = hour - _this.serverTime;
                  if (時間 > 0) {
                    _this.bargainGoods[key].down = "カウントダウン終了:";
                    _this.bargainGoods[キー].countDown =
                      _this.bargainGoods[キー].overTime;
                  }
                } そうでない場合 (starttime > _this.serverTime) {
                  var starhourtime = startime - _this.serverTime;
                  スターアワータイム > 0 の場合
                    _this.bargainGoods[key].down = "カウントダウンを開始:";
                    _this.bargainGoods[キー].countDown =
                      _this.bargainGoods[キー].activityStartTime;
                  }
                } それ以外 {
                  _this.bargainGoods[key].down = "終了しました";
                  _this.bargainGoods[キー].countDown = "";
                }
                // console.log(_this.bargainGoods);
              }
            }
            _this.bargainGoods = _this.bargainGoods;
          }
        }
      });
    },
    // サーバー時間を取得する findServiceTime() {
      var _this = これ;
      _this.$axios({
        url: "serverTime/getDateTime",
        成功: function(res) {
          _this.serverTime = res.item;
        }
      });
    },

    Djs_time: 関数() {
      this.timer = setInterval(() => {
        this.serverTime = this.serverTime + 1000;
      }, 1000);
    },

    Djs_timeList: 関数(itemEnd) {
      // ここでの itemEnd の日付は年、月、日、時、分、秒です。 var endItem = new Date(itemEnd).getTime(); // リストに渡された期限を取得し、タイムスタンプに変換します。 var nowItem = this.serverTime; // 現在の時刻を取得します。 var rightTime = endItem - nowItem; // 期限から現在の時刻を引いた値 if (rightTime > 0) {
        // 残りのカウントダウン時間を判断します。0 より大きい場合はカウントダウンを実行し、そうでない場合は終了します。var dd = Math.floor(rightTime / 1000 / 60 / 60 / 24);
        var hh = Math.floor((rightTime / 1000 / 60 / 60) % 24);
        var mm = Math.floor((rightTime / 1000 / 60) % 60);
        var ss = Math.floor((rightTime / 1000) % 60);
        var showTime = dd + "日" + hh + "時間" + mm + "分" + ss + "秒";
      } それ以外 {
        var showTime = "";
      }
      showTime を返します。
    },

  },
    //ページを離れた後にタイマーをクリアするdestroyed() {
    タイマー間隔をクリアします。
  }
};