<template> <div style="height: 100%;"> <div class="my-document-box"> <div v-for="(item,i) in dateList" :key="i" :class="{'dee-active-row-background': index === i}" class="time dee-row-item" @click="timeSearch(item.value,i)">{{ item.label }}</div> </div> </div> </template> <script> export default { // import引入的组件需要注入到对象中才能使用 components: {}, props: {}, data() { // 这里存放数据 return { index: 0, dateList: [ { label: '全部', value: 'all' }, { label: '最近一天', value: -1 }, { label: '最近三天', value: -3 }, { label: '最近七天', value: -7 }, { label: '最近一个月', value: -30 } ] } }, // 监听属性 类似于data概念 computed: {}, // 监控data中的数据变化 watch: {}, // 生命周期 - 创建完成(可以访问当前this实例) created() { }, // 生命周期 - 挂载完成(可以访问DOM元素) mounted() { this.timeSearch('all', 0) }, activated() { }, // 方法集合 methods: { timeSearch(time, index) { this.index = index this.$emit('getVisitTime', time === 'all' ? '' : this.$utils.getComputeDay(time, ' 00:00:00')) } } } </script> <style lang='scss'> </style>