vue.js 日期 触发事件

<template>
  <div>
    <!-- 使用v-model绑定日期输入框的值 -->
    <input type="date" v-model="selectedDate" @change="onDateChange">
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    // 定义一个响应式的数据属性来存储选中的日期
    const selectedDate = ref('');

    // 使用watch来观察selectedDate的变化
    watch(selectedDate, (newValue, oldValue) => {
      if (newValue !== oldValue) {
        console.log(`日期从${oldValue}变为${newValue}`);
        // 在这里可以执行当日期变化时需要进行的操作
      }
    });

    // 定义一个方法来处理日期变化事件
    const onDateChange = (event) => {
      console.log('日期输入框的值变化了:', event.target.value);
      // 这里可以进行更复杂的逻辑处理
    };

    // 返回模板中可以使用的响应式数据和方法
    return {
      selectedDate,
      onDateChange
    };
  }
};
</script>