基于Vue实现支持按周切换的日历_vue日历组件切换月周日都可选择 - CSDN文库

152 浏览量更新于2023-03-16 评论 1 收藏 40KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

基于基于Vue实现支持按周切换的日历实现支持按周切换的日历

基于Vue的日历小功能，可根据实际开发情况按每年、每月、每周、进行切换，具体内容如下

<template>

<div class="date">

<div class="month">

<p>{{ currentYear }}年{{ currentMonth }}月</p>

</div>

<ul class="weekdays">

<li>一</li>

<li>二</li>

<li>三</li>

<li>四</li>

<li>五</li>

<li>六</li>

<li>日</li>

</ul>

<ul class="days">

<li @click="pick(day)" v-for="(day, index) in days" :key="index">

<span v-if="day.getMonth()+1 != currentMonth" class="other-month">{{ day.getDate() }}</span>

<span v-else>

<span v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()"

class="active">{{ day.getDate() }}</span>

<span v-else>{{ day.getDate() }}</span>

</span>

</li>

</ul>

</div>

</template>

js部分：目前默认显示一周，可根据实际情况更改

<script>

export default {

name: 'date',

data () {

return {

currentYear: 1970, // 年份

currentMonth: 1, // 月份

currentDay: 1, // 日期

currentWeek: 1, // 星期

days: [],

}

},

mounted () {

},

created () {

this.initData(null)

},

methods: {

formatDate (year, month, day) {

const y = year

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论0

weixin_38674992

粉丝: 7
资源: 964

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈