vue computed计算属性

模板中的表达式虽然方便,但也只能用来做简单的操作;如果在模板中写太多逻辑,会让模板变得臃肿,难以维护;因此我们推荐使用计算属性来描述依赖响应式状态的复杂逻辑
1. 选项式 API 中,可以提供computed选项来声明计算属性
2. 组合式 API 中,可以通过computed回调函数返回的值来声明计算属性

计算属性与方法的区别:
●两种方式在结果上确实是完全相同的,不同之处在于计算属性值会基于其响应式依赖被缓存。
●一个计算属性仅会在其响应式依赖更新时才重新计算。这意味着只要所依赖的数据源不改变,无论多少次访问计算属性都会立即返回先前的计算结果,而不用重复执行getter函数。
●方法调用总是会在重新渲染发生时再次执行函数。

计算属性注意事项:
●不要在计算函数中做异步请求或者更改DOM
●避免直接修改计算属性值 

选项式代码示例:

<script>
export default {data: () => ({age: 20, // 年龄birthday: '' // 生日}),// 计算属性选项computed: {// 年龄阶段ageState() {if (this.age < 18) {return '未成年'} else if (this.age < 35) {return '青年'} else if (this.age < 50) {return '中年'} else {return '老年'}},// 星座constellation() {// yyyy-MM-dd -> ['yyyy', 'MM', 'dd']let birArr = this.birthday.split('-')// 月份let month = parseInt(birArr[1])// 日份let day = parseInt(birArr[2])// 判断switch (month) {case 1:if (day <= 19) {return '魔羯座'} else {return '水平座'}case 2:if (day <= 18) {return '水平座'} else {return '双鱼座'}case 3:if (day <= 20) {return '双鱼座'} else {return '白羊座'}case 4:if (day <= 19) {return '白羊座'} else {return '金牛座'}case 5:if (day <= 20) {return '金牛座'} else {return '双子座'}case 6:if (day <= 21) {return '双子座'} else {return '巨蟹座'}case 7:if (day <= 22) {return '巨蟹座'} else {return '狮子座'}case 8:if (day <= 22) {return '狮子座'} else {return '处女座'}case 9:if (day <= 22) {return '处女座'} else {return '天秤座'}case 10:if (day <= 23) {return '天秤座'} else {return '天蝎座'}case 11:if (day <= 22) {return '天蝎座'} else {return '射手座'}case 12:if (day <= 21) {return '射手座'} else {return '魔羯座'}default:return '请选择日期'}}}
}
</script><template><div>年龄:<input type="number" v-model.lazy="age"><!-- 简单的表达式 --><h3>年龄阶段(简单):{{ age < 18 ? '未成年' : '成年' }} </h3><!-- 计算属性:年龄阶段 --><h3>年龄阶段(复杂):{{ ageState }} </h3></div><hr><div>生日:<input type="date" v-model="birthday"><!-- 计算属性:星座 --><h3>星座:{{ constellation }}</h3></div></template>

组合式代码示例:

<script setup>
import { computed, ref } from 'vue'let age = ref(20) // 年龄// 计算属性:年龄阶段
let ageState = computed(() => {if (age.value < 18) {return '未成年'} else if (age.value < 35) {return '青年'} else if (age.value < 50) {return '中年'} else {return '老年'}
})let birthday = ref('') // 生日// 计算属性:星座
let constellation = computed(() => {// yyyy-MM-dd -> ['yyyy', 'MM', 'dd']let birArr = birthday.value.split('-')// 月份let month = parseInt(birArr[1])// 日份let day = parseInt(birArr[2])// 判断switch (month) {case 1:if (day <= 19) {return '魔羯座'} else {return '水平座'}case 2:if (day <= 18) {return '水平座'} else {return '双鱼座'}case 3:if (day <= 20) {return '双鱼座'} else {return '白羊座'}case 4:if (day <= 19) {return '白羊座'} else {return '金牛座'}case 5:if (day <= 20) {return '金牛座'} else {return '双子座'}case 6:if (day <= 21) {return '双子座'} else {return '巨蟹座'}case 7:if (day <= 22) {return '巨蟹座'} else {return '狮子座'}case 8:if (day <= 22) {return '狮子座'} else {return '处女座'}case 9:if (day <= 22) {return '处女座'} else {return '天秤座'}case 10:if (day <= 23) {return '天秤座'} else {return '天蝎座'}case 11:if (day <= 22) {return '天蝎座'} else {return '射手座'}case 12:if (day <= 21) {return '射手座'} else {return '魔羯座'}default:return '请选择日期'}
})
</script><template><div>年龄:<input type="number" v-model.lazy="age"><!-- 简单的表达式 --><h3>年龄阶段(简单):{{ age < 18 ? '未成年' : '成年' }} </h3><!-- 计算属性 --><h3>年龄阶段(复杂):{{ ageState }} </h3></div><hr><div>生日:<input type="date" v-model="birthday"><h3>星座:{{ constellation }}</h3></div>
</template>

 

 

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

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

相关文章

【Java面试/24春招】技术面试题的准备

Spring MVC的原理 Mybatis的多级缓存机制 线程池的大小和工作原理 上述问题&#xff0c;我们称为静态的问题&#xff0c;具有标准的答案&#xff0c;而且这个答案不会变化&#xff01; 如果没有Spring&#xff0c;会怎么样&#xff1f;IOC这个思想是解决什么问题&#xff1f…

[数据集][图像分类]苹果叶子病害分类数据集9714张4类别

数据集类型&#xff1a;图像分类用&#xff0c;不可用于目标检测无标注文件 数据集格式&#xff1a;仅仅包含jpg图片&#xff0c;每个类别文件夹下面存放着对应图片 图片数量(jpg文件个数)&#xff1a;9714 分类类别数&#xff1a;4 类别名称:["apple_scab","bl…

【牛客】VL65 状态机与时钟分频

描述 题目描述&#xff1a; 使用状态机实现时钟分频&#xff0c;要求对时钟进行四分频&#xff0c;占空比为0.25 信号示意图&#xff1a; clk为时钟 rst为低电平复位 clk_out 信号输出 Ps 本题题解是按照1000的状态转移进行的&#xff0c;不按照此状态进行&#xff0c;编译器…

蓝桥杯练习系统(算法训练)ALGO-985 幸运的店家

资源限制 内存限制&#xff1a;256.0MB C/C时间限制&#xff1a;1.0s Java时间限制&#xff1a;3.0s Python时间限制&#xff1a;5.0s 问题描述 炫炫开了一家商店&#xff0c;卖的货只有一个&#xff0c;XXX&#xff0c;XXX卖N元钱。有趣的是&#xff0c;世界上只有面值…

Kafka|处理 Kafka 消息重复的有效措施

文章目录 消息重复场景生产者端Kafka Broker消费者端 如何防止消息重复 消息重复是 Kafka 系统中另一个常见的问题&#xff0c;可能发生在生产者、Broker 或消费者三个方面。下面我们来讨论一些可能导致消息重复的场景以及如何处理。 消息重复场景 生产者端 重试机制导致消息…

剑指offer 二维数组中的查找 C++

目录 前言 一、题目 二、解题思路 1.直接查找 2.二分法 三、输出结果 前言 最近在牛客网刷题&#xff0c;刷到二维数组的查找&#xff0c;在这里记录一下做题过程 一、题目 描述 在一个二维数组中&#xff08;每个一维数组的长度相同&#xff09;&#xff0c;每一行都按照…

微信小程序开发:记一次提审失败的反馈重审

我在第一次提审小程序的时候很明确说了我这个是接入的阿里云的人像动漫化接口&#xff0c;但是还是给我不通过&#xff1a; 说我涉及AI合成&#xff0c;个人是做不了一点AI相关的东西&#xff0c;一点都不行&#xff1a; 我肯定不接受了&#xff0c;反馈说&#xff1a; 还把…

2024.3.6

作业1&#xff1a;使用C语言完成数据库的增删改 #include <myhead.h>//定义添加员工信息函数 int Add_worker(sqlite3 *ppDb) {//准备sql语句printf("请输入要添加的员工信息:\n");//从终端获取员工信息char rbuf[128]"";fgets(rbuf,sizeof(rbuf),s…

ArrayList的扩容机制

ArrayList 的底层操作机制源码分析 ArrayList中维护一个Object类型的数组elementData transient Object[] elementData; //transient表示瞬间 短暂的&#xff0c;表示该属性不会被序列化当创建ArrayList对象时&#xff0c;如果使用的是无参构造器&#xff0c;则初始elementDa…

SpringBoot之RestTemplate在URL中转义字符的问题

参考 Spring Boot之RestTemplate在URL中转义字符禁止转义的问题解决 问题复现 最近在做一个拖曳验证码的功能&#xff0c;需要在url后面将verify的字符串附上再由服务端进行比对。问题就出在这里了。 使用的是springBoot的resetTemplate&#xff0c;发现了一个问题&#xff…

C#知识点-22(ADO.NET五个对象,SQL漏洞注入攻击)

ADO.NET 概念&#xff1a;ADO.NET就是一组类库&#xff0c;这组类库可以让我们通过程序的方式访问数据库&#xff0c;就像System.IO的类用类操作文件一样&#xff0c;System.Data这组类是用来操作数据库的&#xff08;不光是MSSql Server&#xff09;&#xff0c;它提供了统一…

springboot项目整合minio实现文件的分布式存储

minio是一款分布式存储系统&#xff0c;上一篇详细介绍了minio在windows环境下的搭建集群并通过nginx实现负载均衡&#xff0c;这里简单介绍下springboot项目整合minio并实现文件的上传下载删除等操作。 一、依赖的引入 1.1、maven项目 <dependency><groupId>io…

【Windows 常用工具系列 14 -- windows 网络驱动映射】

文章目录 windows 网络驱动映射 windows 网络驱动映射 映射网络驱动器的意思是将局域网中的某个目录映射成本地驱动器号。 在windows上将服务器目录映射到本地盘&#xff1a; 进入到服务器执行下面命令既可以看到对应的 IP地址&#xff1a; 将对应的IP地址填入上图中。 映…

Synchronized(三:JVM中锁的优化)

简单来说在JVM中的monitorenter和monitorexit字节码依赖于底层的操作系统的Mutex Lock来实现的&#xff0c;但是由于使用Mutex Lock需要将当前线程挂起并从用户态切换到内核态来执行&#xff0c;这种切换的代价是非常昂贵的&#xff1b;然而在现实中大部分情况下&#xff0c;同…

C++ Floyd求最短路 Floyd算法(多源汇最短路)

给定一个 n 个点 m 条边的有向图&#xff0c;图中可能存在重边和自环&#xff0c;边权可能为负数。 再给定 k 个询问&#xff0c;每个询问包含两个整数 x 和 y &#xff0c;表示查询从点 x 到点 y 的最短距离&#xff0c;如果路径不存在&#xff0c;则输出 impossible。 数据…

docker部署前后端分离项目

docker部署前后端分离项目 前提&#xff0c;服务器环境是docker环境&#xff0c;如果服务器没有安装docker&#xff0c;可以先安装docker环境。 各个环境安装docker&#xff1a; Ubuntu上安装Docker&#xff1a; ubuntu离线安装docker: CentOS7离线安装Docker&#xff1a; Cen…

类与对象-对象特性

师从黑马程序员 对象的初始化和清理 构造函数和析构函数 用于完成对象的初始化和清理工作 如果我们不提供构造和析构&#xff0c;编译器会提供编译器提供的构造函数和析构函数是空实现 构造函数&#xff1a;主要用于创建对象时为对象的成员属性赋值&#xff0c;构造函数由编…

什么是机器视觉?

什么是机器视觉 近年来&#xff0c;人工智能渐渐成为一个热点话题。作为人工智能领域的一个分支&#xff0c;图像处理技术也随之发展到了一个新的高度&#xff0c;各种新的软件工具、算法库、开源资料不断涌现&#xff0c;各行各业也渐渐开始进行技术变革。比较典型的例子是&a…

运维常见的工具

当谈到DevOps时&#xff0c;有许多工具可用于自动化、协作和监控软件开发和运维过程。收集整理了以下DevOps常见的工具及其简介&#xff1a; 版本控制&#xff1a;Git - 分布式版本控制系统&#xff0c;用于协作开发和追踪代码变更。 持续集成&#xff1a;Jenkins - 开源自动…

【论文笔记】Gemma: Open Models Based on Gemini Research and Technology

Gemma 日期: March 5, 2024 平台: CSDN, 知乎 状态: Writing Gemma: Open Models Based on Gemini Research and Technology 谷歌最近放出的Gemma模型【模型名字来源于拉丁文gemma&#xff0c;意为宝石】采用的是与先前Gemini相同的架构。这次谷歌开源了两个规模的模型&…