vue中的计算属性传参

 更新时间:2022年08月31日 10:13:22   作者:坏丶毛病  
这篇文章主要介绍了vue中的计算属性传参,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue计算属性传参

最近很多小伙伴问到,计算属性怎么做到像普通函数一样传参呢?

针对这个问题

我们来看看下面的示例

<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了一个函数,这个函数的参数即我们传入的值,而内部也能直接拿到并使用这个值,这样就做到了计算属性传参(当然,多个参数也是可行的)

好了,以上就是对计算属性如何传参的介绍使用

vue计算属性传参,根据值不同,渲染相应的内容

业务描述

在开发项目过程中,后台传过来一个数组,根据类型显示相应内容。

1、可以直接在渲染出用三目表达式选择渲染内容。可可选择的条件多了,就不适用了,也不利于扩展。

2、采用计算属性。

<template v-for="(item,index) in languageAddDataArray" >
<el-form-item :label=getLanguageType(item.languageType) >
    <el-input v-model="item.content"  auto-complete="off" size="mini"> </el-input>
</el-form-item>
 </template>
<script>
           export default {
         data () {
   languageAddDataArray:[],
         },
        computed:{
  getLanguageType(){
        return function (type) {
   return type==1?'中文':'英文';
        }
   }
       }
           }
</script>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • vue3.0中的watch侦听器实例详解

    vue3.0中的watch侦听器实例详解

    虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器,这就是为什么Vue通过watch选项提供了一个更通用的方法,来响应数据的变化,这篇文章主要给大家介绍了关于vue3.0中watch侦听器的相关资料,需要的朋友可以参考下
    2021-10-10
  • Django Vue实现动态菜单和动态权限

    Django Vue实现动态菜单和动态权限

    本文主要介绍了Django Vue实现动态菜单和动态权限,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • Vue+Element ui 根据后台返回数据设置动态表头操作

    Vue+Element ui 根据后台返回数据设置动态表头操作

    这篇文章主要介绍了Vue+Element ui 根据后台返回数据设置动态表头操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • Vue中ElementUI结合transform使用时弹框定位不准确问题解析

    Vue中ElementUI结合transform使用时弹框定位不准确问题解析

    在近期开发中,需要将1920*1080放到更大像素大屏上演示,所以需要使用到transform来对页面进行缩放,但是此时发现弹框定位出错问题,无法准备定位到实际位置,本文给大家分享Vue中ElementUI结合transform使用时弹框定位不准确解决方法,感兴趣的朋友一起看看吧
    2024-01-01
  • vue的table表格组件的封装方式

    vue的table表格组件的封装方式

    这篇文章主要介绍了vue的table表格组件的封装方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • Vue + Element 自定义上传封面组件功能

    Vue + Element 自定义上传封面组件功能

    这篇文章主要介绍了Vue + Element 自定义上传封面组件,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-01-01
  • vue+elementUI实现动态面包屑

    vue+elementUI实现动态面包屑

    这篇文章主要为大家详细介绍了vue+elementUI实现动态面包屑,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • uniapp实现红包动画效果代码实例(vue3)

    uniapp实现红包动画效果代码实例(vue3)

    uniapp作为一种基于Vue.js的前端框架,实现了一套代码多端运行的理念,成为了众多开发者的首选,下面这篇文章主要给大家介绍了关于uniapp实现红包动画效果的相关资料,需要的朋友可以参考下
    2024-01-01
  • vue实现页面自适应的常用4种方法

    vue实现页面自适应的常用4种方法

    前端页面自适应有很多方法可以实现,本文小编将为大家详细介绍四种常用的方法,并提供相应的代码示例,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-10-10
  • vue.js中proxyTable 转发请求的实现方法

    vue.js中proxyTable 转发请求的实现方法

    今天小编就为大家分享一篇vue.js中proxyTable 转发请求的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09

最新评论