Vue3 之 computed 属性,实现日历翻月份功能

1. Vue3中的computed函数

1.1. 什么是computed?
computed属性是Vue3中的一个响应式计算属性,它可以根据其他响应式数据的变化而自动更新其自身的值。computed属性可以接收一个计算函数,并在计算函数中使用其他响应式数据的值进行计算。当任何一个参与计算的响应式数据发生变化时,computed属性会自动重新计算其值,并触发相应的依赖更新。
1.2. 如何定义computed?
在Vue3中,你可以通过computed函数来定义一个计算属性。computed函数接收一个计算函数作为参数,并返回一个响应式的ref对象。

下面是一个使用computed函数形式用法的例子:实现日历翻月份功能
 

<template><div><button @click="prevMonth">上一月</button><span>{{ currentMonth }}</span><button @click="nextMonth">下一月</button><ul><li v-for="day in days" :key="day">{{ day }}</li></ul></div>
</template><script>
import { ref, computed } from 'vue';export default {setup() {const currentDate = ref(new Date());const daysInMonth = computed(() => {const date = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth(), 1);const days = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();return Array.from({ length: days }, (_, i) => i + 1);});const currentMonth = computed(() => {const date = currentDate.value;return `${date.getFullYear()}年${date.getMonth() + 1}月`;});function prevMonth() {currentDate.value = new Date(currentDate.value.getFullYear(),currentDate.value.getMonth() - 1,);}function nextMonth() {currentDate.value = new Date(currentDate.value.getFullYear(),currentDate.value.getMonth() + 1,);}return {currentMonth,daysInMonth,prevMonth,nextMonth,};},
};
</script>

这个例子包含了基本的日历展示,以及上一月和下一月的按钮用于翻页。setup函数中定义了响应式数据currentDate和计算属性currentMonthdaysInMonth,分别表示当前月份和天数列表。prevMonthnextMonth函数用于更新currentDate实现翻页功能。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/47742.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

verilog bug记录——正点原子spi_drive存在的问题

verilog bug记录——正点原子spi_drive存在的问题 问题概述代码修改—spi_drive.v遗留问题 问题概述 因为项目需求&#xff0c;需要利用spi对flash进行擦除和写入操作&#xff0c;所使用的开发板是正电原子的达芬奇开发板&#xff0c;我事先往Flash里面存了两个bit&#xff0c…

全国产服务器主板:搭载飞腾FT2000+/64处理器的高性能加固服务器

近期很多朋友咨询全国产化的服务器主板。搭载的是飞腾FT-2000/64的全国产化服务器主板。他的主要特点是&#xff1a;①丰富的PCIe、千兆以太网、SATA接口&#xff0c;可用作数据处理、存储、通信服务器&#xff1b;②​​​​​​​板载独立显示芯片&#xff0c;对外HDMI/VGA/L…

UseMemo、UseCallback、React.memo

前置问题&#xff1a;React中的函数式组件什么时候会重新渲染&#xff1f;   答&#xff1a;组件中的状态改变&#xff08;包含Context&#xff09;、父组件重新渲染导致子组件的重新渲染。 组件多次重新渲染会导致性能的下降。UseMemo、UseCallback、React.memo都利用缓存机…

DP(6) | 完全背包 | Java | LeetCode 322, 179, 139 做题总结

322. 零钱兑换 我的错误答案 class Solution {public int coinChange(int[] coins, int amount) {int[][]dp new int [coins.length][amount1];for(int j0; j<amount; j) {if(coins[0] j){dp[0][coins[0]] 1;}}for(int i1; i<coins.length; i) {for(int j0; j<am…

vue3前端开发-小兔鲜项目-图片懒加载的自定义标签

vue3前端开发-小兔鲜项目-图片懒加载的自定义标签&#xff01;很多大型网站&#xff0c;因为首页面渲染的内容太多了&#xff0c;然而有些用户&#xff0c;可能在顶部就发现了自己感兴趣的内容&#xff0c;直接就点击跳转去了其他页面&#xff0c;因此&#xff0c;完全没有必要…

神经网络之多层感知机

目录 一、全连接层&#xff1a;二、单层感知机概念&#xff1a;三、多层感知机概念&#xff1a; 一、全连接层&#xff1a; 在神经网络中&#xff0c;全连接层就是每个神经元都与上一层的所有神经元相连接&#xff0c;即每个神经元都接收上一层所有神经元的输入&#xff0c;并…

【面试题】数据结构:堆排序的排序思想?

堆排序的排序思想&#xff1f; 堆排序是一种高效的排序算法&#xff0c;其基本思想是利用堆这种数据结构来实现排序。堆是一种特殊的完全二叉树&#xff0c;通常用数组来表示。堆排序的基本步骤如下&#xff1a; 1. 构建初始堆&#xff1a; 将待排序的数组转换成一个最大堆&a…

【JavaEE】volatile + final + wait-notify + join + park-unpark 相关原理

本文基于jdk8 本文所讲的一些原理都是在多线程中经常使用的内容。 参考&#xff1a;黑马程序员深入学习Java并发编程&#xff0c;JUC并发编程全套教程_哔哩哔哩_bilibili 目录 volatile原理 Java内存模型(JMM) 可见性&有序性 双重检查锁应用 final原理 设置final变量…

GPT-4o大语言模型优化、本地私有化部署、从0-1搭建、智能体构建

原文链接&#xff1a;GPT-4o大语言模型优化、本地私有化部署、从0-1搭建、智能体构建https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247608565&idx3&snd4e9d447efd82e8dd8192f7573886dab&chksmfa826912cdf5e00414e01626b52bab83a96199a6bf69cbbef7f7fe…

学习日志:java线程

文章目录 前言一、线程和进程线程与进程的关系 二、Java 线程和操作系统的线程JDK 1.2 之前JDK 1.2 及以后用户线程和内核线程 三、创建线程四、线程的生命周期和状态五、线程的上下文切换六、Thread#sleep() 方法和Object#wait() 方法 前言 这里总结线程的一些概念。 一、线程…

​探讨元宇宙和VR虚拟现实之间的区别​

在数字时代&#xff0c;人们对虚拟现实的兴趣与日俱增。在虚拟现实技术的推动下&#xff0c;出现了两个概念&#xff1a;元宇宙和VR虚拟现实。虽然这两个概念都与虚拟现实有关&#xff0c;但它们有着不同的特点和用途。在本文中&#xff0c;我们将探讨元宇宙和VR虚拟现实之间的…

香橙派AIpro-携手华为-为AI赋能

文章目录 香橙派AIpro-携手华为-为AI赋能开箱和功能介绍开箱功能介绍 环境搭建镜像烧录进入系统 测试项目YOLOv5部署YOLOv5识别单张图片实时识别视频使用Ascend测试yolov5 产品评价 香橙派AIpro-携手华为-为AI赋能 今天新入手了一款香橙派AIPro&#xff0c;让我们一起跟着文章…

接口防刷!利用redisson快速实现自定义限流注解

问题&#xff1a; 在日常开发中&#xff0c;一些重要的对外接口&#xff0c;需要加上访问频率限制&#xff0c;以免造成资&#xfffd;&#xfffd;损失。 如登录接口&#xff0c;当用户使用手机号验证码登录时&#xff0c;一般我们会生成6位数的随机验证码&#xff0c;并将验…

【SpringBoot】Controller与Test

第一个SpringBoot程序: RestController public class HelloController{ RequestMapping("/hello") public String hello(){ return "Hello Spring Boot!!!"; } } 单元测试: SpringBootTest public class HelloTest{ Test public void hello(){ Syste…

【iOS】——编译链接和动态链接器

前言 计算机语言分为机器语言&#xff1a;汇编语言&#xff0c;高级语言。 可以将高级语言分为两种&#xff1a;1&#xff0c;编译语言和解释型语言&#xff08;直译式语言&#xff09;。 编译型语言&#xff08;一次性翻译&#xff09; 编译型语言的程序只要经过编译器编译之…

服务的弹性守护者:在Eureka中实现服务降级策略

标题&#xff1a;服务的弹性守护者&#xff1a;在Eureka中实现服务降级策略 在微服务架构中&#xff0c;服务的稳定性和可靠性至关重要。Eureka作为Netflix开源的服务发现框架&#xff0c;不仅提供了服务注册与发现功能&#xff0c;还支持实现服务的降级策略。服务降级是一种在…

uniapp自定义tabBar

uniapp自定义tabBar 1、在登录页中获取该用户所有的权限 getAppFrontMenu().then(res>{if(res.length > 0){// 把所有权限存入缓存中let firstPath res.reverse()[0].path;uni.setStorageSync(qx_data, res);uni.switchTab({url: firstPath,})// 方法二 通过uni.setTabB…

Netty SSL/TLS

Netty中的SSL/TLS详细原理主要涉及到SSL/TLS协议在Netty框架中的实现方式和加密通信过程。SSL/TLS&#xff08;安全套接层/传输层安全协议&#xff09;是一种安全协议&#xff0c;用于在两个通信应用程序之间提供私密性和数据完整性。以下是Netty中SSL/TLS的详细原理&#xff1…

Android 大屏外接显示器锁屏无触摸

一、大海捞针 1、首先查看log,发现异常log log表示主显示器即id 0的显示器有可交互窗口但是没有焦点,副显示器即id 4有焦点但是没有可交互窗口。猜想副显示器把主显示器的焦点抢走了,只需把焦点从副显示器挪回主显示器即可。 通过查看源代码知道上面这段log来自于InputDi…

【时时三省】单元测试 简介

目录 1,单元测试简介 2,单元测试的目的 3,单元测试检查范围 4,单元测试用例设计方法 5,单元测试判断通过标准 6,测试范围 7,测试频率 8,输出成果 经验建议: 山不在高,有仙则名。水不在深,有龙则灵。 ----CSDN 时时三省 1,单元测试简介 单元测试在以V模型…