vue jQuery 混用实现 点击日历展示list

在Vue中，通常建议使用原生JavaScript或Vue自身的方法来处理日历的逻辑。但如果你确实需要在Vue项目中使用jQuery来实现日历的功能，可以通过以下方式进行：

1. 在项目中安装jQuery。
2. 在Vue组件中引入jQuery。
3. 使用jQuery选择器和日历插件来实现日历的展示。

以下是一个简单的例子，使用了fullcalendar这个流行的jQuery日历插件：

首先，安装jQuery和fullcalendar：

npm install jquery --save
npm install @fullcalendar/core @fullcalendar/interaction @fullcalendar/daygrid --save

然后，在Vue组件中使用jQuery和fullcalendar：

<template>
  <div>
    <div id="calendar"></div>
  </div>
</template>
 
<script>
import $ from 'jquery';
import '@fullcalendar/core/main.min.js';
import '@fullcalendar/daygrid/main.min.js';
import '@fullcalendar/interaction/main.min.js';
import '@fullcalendar/core/locales/zh-cn.js'; // 如果需要中文
 
export default {
  name: 'CalendarComponent',
  mounted() {
    $('#calendar').fullCalendar({
      locale: 'zh-cn', // 设置为中文，如果需要
      defaultView: 'dayGridMonth',
      handleWindowResize: true,
      // 其他配置项...
    });
  }
};
</script>
 
<style>
/* 在这里添加fullcalendar的样式 */
@import '@fullcalendar/core/main.min.css';
@import '@fullcalendar/daygrid/main.min.css';
</style>

请注意，混用jQuery和Vue可能会导致维护上的问题，因此在Vue项目中尽可能避免使用jQuery。如果只是需要一个简单的日历功能，建议使用Vue自带的方法或者其他Vue友好的日历插件，如vue-cal或v-calendar。