vue做时间段搜索

所呈现的效果
这里的时间是设置默认从当天00:00:00开始,到所查询结束的23:59:59结束
代码是用element中DateTimePicker 日期时间选择器
用el-form进行的包裹

 <el-form-item label="日期">
                         <el-date-picker
                            v-model="formData.start"
                            type="datetime"
                            placeholder="选择日期"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :default-time="'00:00:00'"
                            >
                        </el-date-picker>
                        -
                        <el-date-picker
                            v-model="f
  • 4
    点赞
  • 38
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
防抖是一种常用的前端技术,它可以有效地降低函数的执行频率,从而提升页面的性能和体验。在 Vue 中实现搜索按钮防抖,常用的方式是使用 debounce 函数。debounce 函数会延迟一段时间执行函数,如果在延迟期间再次触发函数,就会重新计时,直到延迟期结束,才会执行函数。这样就可以避免短时间内频繁触发函数,从而降低服务器压力。 下面是一个使用 debounce 函数实现搜索按钮防抖的示例: ``` <template> <div> <input type="text" v-model="keyword"> <button @click="debounceSearch">搜索</button> </div> </template> <script> import { debounce } from 'lodash' export default { data() { return { keyword: '', delay: 500 // 延迟时间,单位毫秒 } }, methods: { debounceSearch: debounce(function () { // 实际执行的搜索函数 console.log('搜索关键字:', this.keyword) }, this.delay) } } </script> ``` 在上面的示例中,使用了 lodash 库的 debounce 函数。在 methods 中定义了 debounceSearch 函数,它会在点击搜索按钮时触发。debounceSearch 函数会调用 debounce 函数,将实际执行的搜索函数作为参数传入,并指定延迟时间为 this.delay。这样,每次点击搜索按钮时,都会执行 debounceSearch 函数,但实际执行的搜索函数会在延迟期结束后才会执行。如果在延迟期内再次点击搜索按钮,就会重新计时,直到延迟期结束后执行搜索函数。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值