vue字段判断显示早上好 中午好 下午好 晚上好

uniapp yekong

Vue要实现根据当前时间自动判断并显示“早上好”、“中午好”、“下午好”或“晚上好”,你可以在Vue组件的data函数中添加一个计算属性来处理这个逻辑。以下是如何修改你的Vue组件来实现这个功能:

修改 <script> 部分

<script>标签中,我们将添加一个计算属性greeting,它会根据当前的小时数来决定显示哪个问候语。

<script>
export default {
    data() {
        return {
            // 其他数据
        };
    },
    computed: {
        greeting() {
            const hour = new Date().getHours(); // 获取当前小时数
            if (hour < 12) {
                return '早上好';
            } else if (hour >= 12 && hour < 14) {
                return '中午好';
            } else if (hour >= 14 && hour < 18) {
                return '下午好';
            } else {
                return '晚上好';
            }
        }
    },
    methods: {
        handleTabChange(tabName) {
            this.currentTab = tabName;
            // 根据当前选中的Tab加载相应的数据或执行其他操作
        }
    }
};
</script>

修改 <template> 部分

接下来,修改<template>部分,使用这个计算属性来动态显示问候语。

<div class="homeHeadLeftTime">
    {{ greeting }}  <!-- 使用计算属性显示问候语 -->
</div>

这样,根据当前的时间,页面上会自动显示相应的问候语,增加了用户体验的亲切感。

喜欢