基本上我有這個日歷行,每個元素都有日期資訊:
我試圖停止單個資料的回圈,以便每個日歷專案都有自己的關于當前和未來幾天的資料。
第一個日歷元素應始終顯示當前日期,其余專案為剩余天數
模板
<template>
<div class="wrapper">
<div class="calendar-wrapper">
<div class="calendar-row"
v-for="(day, idx) in dayArr"
:key="idx"
>
<div
id="card"
class="day-card unactive"
@click="test(idx)"
>
<div class="card-info">
<p class="name">{{ dayOfWeek }}</p>
<p class="day">
{{ currDay }}
</p>
</div>
<div class="dot-wrapper">
<div class="dot-status undone" />
<div class="dot-status undone" />
</div>
</div>
</div>
</div>
</div>
</template>
腳本
setup() {
const moment = require('moment')
const m = moment
// Get the remaining month days starting from today:
const daysRemainingThisMonth = moment().endOf('month').diff(moment(), 'days');
// Turn the remaining days into an array for future rendering in the Template
let dayArr = Array(daysRemainingThisMonth)
// Get the index of a clicked calendar item:
const test = (idx) => {
console.log(idx 1);
}
// Get the current day:
const currDay = m().format('D')
// Get the current week day:
const dayOfWeek = m().format('dddd')
}
我相信有一種方法可以以某種方式訪問??每個日歷元素并為其提供自己的資料,但我不知道如何
uj5u.com熱心網友回復:
我已使用moment功能更改了您的代碼,并在此鏈接中正確顯示。
正如你所看到的,我moment().add(<countingOfDiffrenceFromToday>, 'day')用來到達確切的日期并將其推送到陣列并在v-for回圈中使用它。
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/377006.html
標籤:javascript 数组 Vue.js 瞬间
上一篇:如何記錄哪個用戶在mongoDB資料庫中發布了哪些記錄
下一篇:使用Laravel和Vue時,通過BladeViews將資料傳遞給Vue與使用Axios直接傳遞給Vue組件的優缺點是什么?
