Получить количество дней в месяце и выделить выходные

Question

   <table class="table table-bordered table-hover">
       <tbody>
          <tr>
             <td class="pt-2 pb-2 col-3 text-center">Июнь</td>
             <td v-for="n in 30" class="pt-2 pb-2 text-center">{{ n }}</td>
          </tr>
       </tbody>
   </table>

Помогите как вычислить количество дней в месяце и заменить в место 30 указать это количество

И как после выделить красным цветом выходные в цикле колонке ?

Answer 1

Можно так:

const app = new Vue({
  el: '#app',
  data: {
    year: 2020,
    month: 6,
    monthNames: ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь",
      "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"
    ],
  },
  computed: {
    //  количество дней в месяце, оставил, но в коде нигде не используется теперь
    days() {
      return new Date(this.year, this.month, 0).getDate()
    },
    //  массив дат
    dates() {
      return new Array(this.days).fill(1).map((_, index) => new Date(this.year, this.month - 1, index + 1))
    }
  },
  template: `
      <div>
        <input type="range" min="1" max="12" value="6" v-model="month" />
        <input type="number" min="100" max="9999" value="2020" v-model="year" />
        <table class="table table-bordered table-hover">
          <tbody>
            <tr>
              <td class="pt-2 pb-2 col-3 text-center">
                {{
                  this.monthNames[
                    new Date(this.year, this.month).getMonth() - 1
                  ]
                }}
              </td>
              <td
                v-for="n in dates"
                :style="[
                  n.getDay() === 0 || n.getDay() === 6
                    ? { color: 'red' }
                    : { color: 'black' },
                ]"
                class="pt-2 pb-2 text-center"
              >
                {{ n.getDate() }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
`,
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
</div>

БЛОГ НА HUSL

Получить количество дней в месяце и выделить выходные

Ответы (1 шт):