精华内容
下载资源
问答
  • 计算属性传参
    2022-05-21 15:52:36

    vue计算属性传参需要在计算属性中返回一个函数来传递参数

    computed计算属性和methods方法区别:

    计算属性和methods方法处理结果是一样的;只不过当计算属性会对依赖做缓存,当依赖无变化时会直接返回结果,不会在一次执行计算属性。

    methods方法重新渲染时都会触发函数来进行函数执行。

    计算属性传参方式:

    <div v-for="item in dataArr" :key="item.id">
        <div>{{setItemData(item.amount)}}</div>
    </div> 
    
    computed: {
        setItemData() {
            return (e) => {
                if(!e) return e;
                return e * 100 - 100;
            }
        }
    }
    

    方法传参方式:

    <div v-for="item in dataArr" :key="item.id">
        <div>{{setItemData(item.amount)}}</div>
    </div> 
    
    methods: {
        setItemData(e) {        
            if(!e) return e;
            return e * 100 - 100;
        }
    }
    

    更多相关内容
  • 计算属性传参

    2022-03-07 21:51:05
    vue中computed计算属性无法直接进行传参 如果有传参数的需求比如说做数据筛选功能可以使用闭包函数(也叫匿名函数)实现 普通计算属性使用 <div>{{newChannel}} {{tipTimeFormat}}</div> newChannel...

    vue中computed计算属性无法直接进行传参

    如果有传参数的需求比如说做数据筛选功能可以使用闭包函数(也叫匿名函数)实现

    普通计算属性使用
    
    <div>{{newChannel}} {{tipTimeFormat}}</div>
    
     newChannel(){
          switch(this.channel){
            case 1:
              return '右摄像头';
            case 2:
              return '后摄像头';              
          }      
    },
    
    计算属性带参数  
    [item.plate || "", newChannel(item.channel) || ""]
    
      computed: {
        newChannel(){
          return function(channel){
            switch (channel){
              case 1:
                return '右摄像头';
              case 2:
                return '后摄像头';
            }        
        }  
      },
    
    展开全文
  • vue计算属性传参

    千次阅读 2022-04-17 22:54:49
    最近很多小伙伴问到,计算属性怎么做到像普通函数一样传参呢? 针对这个问题,我们来看下下面的示例: <template> <p>{{ getCallerName }}</p> </template> <script> export ...

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

    <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计算属性传参

    2021-03-25 16:07:44
    学习Vue有一段时间了,一开始一直会有一个误区——computed计算属性无法和methods事件一样进行参数的传递。 很神奇的事情发生了,使用闭包可以在computed中获取到标签中传来的值并且处理完之后return回去结果,废话...

    computed可以传参

    学习Vue有一段时间了,一开始一直会有一个误区——computed计算属性无法和methods事件一样进行参数的传递。
    很神奇的事情发生了,使用闭包可以在computed中获取到标签中传来的值并且处理完之后return回去结果,废话不多说,下面就是个小例子!!!!!

    computed(){
    	arguments(){
    		return function(a){
    			return a
    		}
    	}
    }
    
    arguments(250) // 250
    

    在实际项目中的使用

    <li v-for = "child1 in item.children" :key=child1.label v-show = "comState1(item.label)">
    
     computed: {
                comState1() {
                    return function(label){
                       return label ==this.clickLabel1&&this.vState1//返回表达式判断后的boolean结果
                    } 
                },
    

    很实用的小例子,记录。

    展开全文
  • vue3的计算属性传参

    千次阅读 2022-03-25 11:18:29
    场景大概是我从接口中获取一个对象数组的列表,某一行数据使用计算属性进行处理, <ul> <li>{{demandStatusFilter(row.status)}}</li> </ul> import { defineComponent, reactive, ref,...
  • vue 计算属性传参

    2020-03-05 14:42:52
    vue小白一直以为计算属性作为一个属性是不能传参的,...于是,尝试计算属性传参,结果还成了。 <template> <div> {{validPort('deploy')}} </div> </template> <script> ......
  • vue学习笔记——计算属性传参

    千次阅读 2020-05-12 20:30:46
    首先,计算属性,它是被当做属性来用的,一般不给它传参,直接接收它返回的值,但是有时候开发过程中不得不去传参来获取特定的值,可是直接往计算属性传参根本没用,所以最后考虑到一个折中的办法,那就是返回一个...
  • vue计算属性传参方法

    2021-06-12 10:42:03
    vue计算属性传参方法: list(){ return (index) =>{return this.sku_card[index].list} },//index为参数 调用方法: v-for="(item2,index2) in list(index)
  • vue3的computed计算属性传参

    千次阅读 2022-04-29 23:44:10
    1. 在v-for中使用计算属性传参。 <div v-for="item in list"> <div v-if='isShow(item)'>是否显示</div> </div> <script> import {computed} from 'vue' const currentId=ref...
  • vue 计算属性 如何在模板变量中 传参
  • vue计算属性传参(computed)

    千次阅读 2021-01-26 12:17:57
    计算属性默认是无法传递参数的 主要用于对当前文件组件的数据(data/props),进行操作,缓存当前计算属性的依赖 而有些情况需要使用到计算属性来传递参数,可以使用闭包函数: computed: { // 获取数据进行操作 ...
  • vue 计算属性传参,并返回处理结果

    万次阅读 2018-10-25 09:51:05
    备注" width="210" align="center"> ... 1、计算属性传参,方法里写成 return function (val) {}形式  2、 slot-scope="scope"代表插槽的意思,这里 scope 代表行 data。scope.row取整行数据
  • computed计算属性传参

    2019-10-21 16:41:54
    参考:https://blog.csdn.net/xlelou/article/details/81477391
  • vue中为computed计算属性传参遇到的问题,已解决
  • 业务描述:在开发项目过程中,后台传过来一个数组,根据类型显示相应内容。...2、采用计算属性。  &lt;template v-for="(item,index) in languageAddDataArray" &gt;  &lt...
  • 一般情况下computed计算属性无法直接进行传参,只能获取data中的值: computed: { ifAchieve({ classA, classAM, classB, classC, notClass, notAsses }) { return classA || classAM || classB || classC || ...
  • 今天才知道了vue的computed属性可以传递参数 如下, <el-button>{{target(2)?target(1):0}}</el-button>` computed: { target () { return function (id) { id += 1 return id } } },

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 31,980
精华内容 12,792
关键字:

计算属性传参

友情链接: HARDWARE.rar