vue计算属性传参

article/2025/6/16 1:56:24

最近很多小伙伴问到,计算属性怎么做到像普通函数一样传参呢?
针对这个问题,我们来看下下面的示例:

<template><p>{{ getCallerName }}</p></template><script>
export default {props: {callRecord: {type: Object,default: () => ({}),}},computed:{// 获取名称getCallerName() {return 'callerName'},}
}

这个示例,我们接收一个从父组件传过来的属性值 callRecord,对象类型

需求:我们需要根据接收值中的type字段,去判断应该解析名称为“主叫名称”还是“被叫名称”

因为计算属性具有缓存效果,所以我们期望用计算属性去获取(当然,过滤器也能使用,方法有很多,这里不用较真)
所以,这里我们就要想办法把我们的值当做参数传进去。
官网并没解释计算属性应该怎么传值,但是呢,计算属性都会返回一个值,基于这个条件,我们就想到了另一个只知识点 闭包

闭包:闭包就是能够读取其他函数内部变量的函数,简单点说,就是嵌套函数(关于闭包的解释和使用,大家可以查阅相关资料,这里就不过多赘述了)

有了思路,我们就开始试试看

<template><p>{{ getCallerName(callRecord) }}</p></template><script>
export default {props: {callRecord: {type: Object,default: () => ({}),}},computed:{// 获取名称getCallerName() {return callRecord => {if (callRecord.type === 1 || callRecord.type === 2) return callRecord.callerName;return callerInfo.callerNumber;};},}
}

观察两段代码可以看出,我们在计算属性里return了一个函数,这个函数的参数即我们传入的值,而内部也能直接拿到并使用这个值,这样就做到了计算属性传参(当然,多个参数也是可行的)
好了,以上就是对计算属性如何传参的介绍使用

如有问题,请指出,接受批评

期待能够对你有所帮助~

在这里插入图片描述


http://chatgpt.dhexx.cn/article/13KAtEOE.shtml

相关文章

08、VUE计算属性

1、计算属性简介 在原生的JavaScript中我们需要一个来自不同数的和的变量&#xff0c; 我们会使用let numab:这种写法&#xff0c;但是当a和b发生改变的 时候&#xff0c;num并不会自动修改&#xff0c;在vue中我们提供了计算属性 可以很好的解决这个问题。2、计算属性的语法 …

Vue-Vue的计算属性(computed)

1.理解 计算属性: 1.定义:要用的属性不存在&#xff0c;要通过已有属性计算得来 2.原理:底层接住了Object.defineproperty方法提供的getter和setter 3.get函数什么时候执行&#xff1f; 初次读取会执行一次 当以来的数据发生变化时会被再次调用 . 4.优势:与methods相比&…

Vue:计算属性

一&#xff0c;计算属性 通过前面的学习&#xff0c;我们可以在模板中双向绑定一些数据或表达式了。但是表达式如果过长&#xff0c;或逻辑更为复杂时&#xff0c;就会变得雕肿甚至难以阅读和维护。例如&#xff1a; <div id"example">{{ message.split().re…

Vue - 计算属性

1.vue计算属性-computed 一个数据, 依赖另外一些数据计算而来的结果 场景: 一个变量的值, 需要用另外变量计算而得来 语法: computed: {"计算属性名" () {return "值"} }注意1: 计算属性和data属性都是变量-不能重名. 用法和data相同 注意2: 函数内变量变…

汉罗塔(河内塔)问题的数学模型

问题引入&#xff1a; 给定A、B、C三个木桩子&#xff0c;给定由n个圆盘组成的塔&#xff08;n个圆盘满足从上到小大小递减的顺序套在A桩上&#xff09;&#xff0c;我们要做的是要将A桩子上的所有圆盘移动到B桩子上&#xff0c;要求每次只能移动一个圆盘&#xff0c;并且移动…

汉罗塔小游戏(自创)

汉诺塔是这样一种小游戏&#xff1a; 有三根柱子。一开始&#xff0c;若干张圆盘按照上小下大的顺序串在第一根柱子上。而游戏的目标为将所有圆盘全部移动到第三根柱子上去&#xff0c;并且仍要保持上小下大的顺序。而且要求&#xff1a; ①每次只能移动一张圆盘。 ②较大的圆盘…

C语言实现递归解决汉罗塔问题

1.问题&#xff1a; 汉诺塔(Tower of Hanoi&#xff09;&#xff0c;又称河内塔。是一个源于印度古老传说的益智玩具。大梵天创造世界的时候做了三根金刚石柱子&#xff0c;在一根柱子上从下往上按照大小顺序摞着64片黄金圆盘。大梵天命令婆罗门把圆盘从下面开始按大小顺序重新…

汉罗塔Python递归实现

count0 def fn(n,begin,end,middle):global count #global更新并以字典形式返回当前全部局部变量(如果不是全局变量在每次调用时初值会被清零)if n1:print("{}:{}-->{}".format(1,begin,end))count1else :fn(n-1,begin,middle,end)print("{}:{}-->{}&qu…

汉罗塔与青蛙跳台阶的递归实现(及扩展青蛙跳台阶)C语言从入门到入土(入门篇)(算法篇p2)

目录 题目&#xff1a;汉罗塔递归实现 思路 实现 题目&#xff1a;青蛙跳台阶递归实现 思路 实现 青蛙跳台阶问题的延伸 谁都不能阻挡你成为更优秀的人。 题目&#xff1a;汉罗塔递归实现 汉罗塔&#xff0c;用递归实现&#xff0c;有三个柱子n个盘子在a&#xff0c;要怎…

【递归】小学生都看得懂的汉罗塔问题

文章目录 前言最简模型规律分析分析总结结论解读 篇尾 前言 大梵天创造世界的时候做了三个金刚石柱子&#xff0c;在一根柱子上从上到下按照大小顺序摞着64骗黄金盘子&#xff0c;大梵天命令婆罗门把圆盘开始按大小顺序重新摆放在另外一个柱子上。在小圆盘上不能放大圆盘&…

汉罗塔问题(递归)

数据结构–汉罗塔 题目描述 在经典汉诺塔问题中&#xff0c;有 3 根柱子及 N 个不同大小的穿孔圆盘&#xff0c;盘子可以滑入任意一根柱子。一开始&#xff0c;所有盘子自上而下按升序依次套在第一根柱子上(即每一个盘子只能放在更大的盘子上面)。移动圆盘时受到以下限制: 1.一…

多柱汉罗塔(python解法,带注释,注释为个人理解)

一、参考链接&#xff1a; 1、普通汉罗塔链接&#xff08;这边也是我的博文&#xff09;&#xff1a; (166条消息) 递归经典算法案例题&#xff08;汉罗塔、阶乘、斐波那契代码&#xff09;_南风~古草的博客-CSDN博客_汉罗塔 2、大佬的多柱汉罗塔博文&#xff08;有数学推…

累加—递归汉罗塔问题 (C语言)

一、累加—递归 一、代码 二、测试结果 二、汉罗塔问题 一、分析 二、代码 三、测试结果 三、总结 一、累加—递归 一、代码 //累加的递归实现 #include <stdio.h>int addTo(int n) {if(n < 0)return 0;else{return addTo(n-1)n;} } void addToTest() {int n…

【C语言】汉罗塔

前言 &#x1f388;大家好&#xff0c;我是何小侠&#x1f388; &#x1f300;大家可以叫我**小何或者小侠&#x1f300;** &#x1f534;我是一名普通的博客写作者&#x1f534; &#x1f490;希望能通过写博客加深自己对于学习内容的理解&#x1f490; &#x1f338;也能帮助…

[C语言]C语言解决汉罗塔问题(初学者版)

目录 1、汉罗塔问题解决思路&#xff1a; 2、代码实现&#xff1a; 函数部分&#xff1a; 全部代码&#xff1a; 运行结果&#xff1a; 3、结语&#xff1a; 1、汉罗塔问题解决思路&#xff1a; 以三个为例&#xff0c;步骤为&#xff1a; 1.首先我们需要将其分成两个整体…

汉诺塔问题的详细讲解(python版)

2022.3.17 2022.11.15 增加次数计算一&#xff0e;抽象为数学问题&#xff1a; 从左到右有A、B、C三根柱子&#xff0c;其中A柱子上面有从小叠到大的n个圆盘&#xff0c;现要求将A柱子上的圆盘移到C柱子上去&#xff0c;期间只有一个原则&#xff1a;一次只能移到一个盘子且大…

Golang 汉罗塔问题

先用一般方法实现汉罗塔方法: 先确定三个"石柱" A B C 。n代表A柱起始圆盘数量 主函数: 结合栈来实现汉罗塔。 因为栈先进后出的特点 很适合汉罗塔。其实和上述方法本质一样,只不过添加了 栈的特性 这里定的栈最大容量为7,可以根据实际情况更改 栈的构造&#xff…

汉罗塔(递归分治)

Java代码如下 public class Hanoi {//操作步骤数private static int steps 1;public static void main(String[] args) {//盘子数目int diskNumber 4;doTowers(diskNumber, A, B, C);}private static void doTowers(int diskNum, char from , char via, char to){if (diskNum…

汉诺塔(Hanoi)问题,Java实现,C语言实现,Python实现!!!

目录 一、汉诺塔的玩法 二、汉诺塔的逻辑 三、代码实现 四、运行结果 五、总结 一、汉诺塔的玩法 汉诺塔&#xff08;Tower of Hanoi&#xff09;&#xff0c;又称河内塔&#xff0c;是一个源于印度古老传说的益智玩具。大梵天创造世界的时候做了三根金刚石柱子&#x…

Java基础语法(汉罗塔)

Java基础语法&#xff08;汉罗塔&#xff09; 1 起源2 需求3 分析3.1 1个碟子3.2 2个碟子3.3 3个碟子3.4 4个碟子3.5 规律 4 代码实现&#xff1a;直接算法5 代码实现封装&#xff1a;栈的思想 1 起源 汉罗塔&#xff08;又称河内塔&#xff09;问题是源于印度一个古老传说的益…