vue里根据当月天数动态渲染表头
时间: 2023-06-29 11:03:01 浏览: 198
你可以使用`computed`属性来根据当前月份计算出当月的天数,并且生成对应数量的表头列,示例如下:
```html
<template>
<table>
<thead>
<tr>
<th v-for="day in daysInMonth">{{ day }}</th>
</tr>
</thead>
<tbody>
<!-- 表格内容 -->
</tbody>
</table>
</template>
<script>
export default {
computed: {
// 计算当月的天数
daysInMonth() {
const date = new Date()
const year = date.getFullYear()
const month = date.getMonth() + 1
// 使用 Date 构造函数生成当前月份的下一个月的第0天,即当前月份的最后一天
const lastDay = new Date(year, month, 0).getDate()
// 生成当月的天数数组
return Array.from({ length: lastDay }, (_, i) => i + 1)
},
},
}
</script>
```
上面的代码中,我们先使用`computed`属性中的`daysInMonth`计算出当月的天数,然后使用`v-for`指令生成对应数量的表头列,从而动态渲染表头。
阅读全文
相关推荐



















