vue计算属性想要传入参数如何解决

2024-12-11 14:47:25

vue计算属性想要传入参数怎么办

先讲解决方案

可以通过return 一个function来实现，在function中传入想要传给computed属性的参数

<q-icon :name="getIcon(item.icon,index+1)" style="font-size:2em" @click="btnClicked(index+1)"/>

computed:{
        getIcon: function(){
            return function(iconName, tabIndex){
                return `${this.tabNum===tabIndex ? '' : 'o_'}${iconName}`;
            }
        },
        ...mapState({
            showSearchFriendDialog: 'showSearchFriendDialog',
            showChangeAvatarDialog: 'showChangeAvatarDialog',
            showCreateGroupDialog: 'showCreateGroupDialog',
            user: 'user'
        })
    },

再讲一下我遇到的问题

vue的v-bind属性传入一个computed函数，当该函数带有参数的时候，浏览器报错，当不带有参数的时候正常执行

下面这样解决

vue计算属性computed使用注意事项(有缓存)

当我们在模板中来显示一份经过对数据项进行复杂计算之后的结果时，我们有两种解决方案：

(1) 计算属性

(2) 函数

应该如何选择？

(1)methods定义函数，如果在模板中使用，每使用一次，就相当于调用了一次，处理逻辑会重新执行。

(2)computed定义计算属性，如果在模板中使用，使用多次，但是如果依赖的数据不发生改变，计算属性对应的函数不会重新执行。

(3)计算属性会做缓存，提高渲染的性能。

结论：

计算属性有缓存，提高渲染性能。

如果在页面上需要用到对现有的数据进行加工得到新数据，则时要使用计算属性

想要给计算属性赋值, 则需要使用set方法

注意事项：计算属性和data一样,都需要设置return,当没有输出结果时,需要排查是不是return漏掉了

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

vue中的计算属性传参

目录 vue计算属性传参我们来看看下面的示例 vue计算属性传参,根据值不同,渲染相应的内容业务描述 vue计算属性传参最近很多小伙伴问到,计算属性怎么做到像普通函数一样传参呢? 针对这个问题我们来看看下面的示例 <template> <p>{{ getCallerName }}</p> </template> <script> export default { props: { callRecord:
vue中动态参数与计算属性的使用方法

一,动态参数从 2.6.0 开始,可以用方括号括起来的 JavaScript 表达式作为一个指令的参数: <a v-bind:[attributeName]="url"> - 这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用.例如,如果你的 Vue 实例有一个 data property attributeName,其值为 "href",那么这个绑定将等价于 v-bind:hr
vue计算属性computed方法内传参方式

目录 vue计算属性computed方法内传参计算属性computed与method的区别什么是计算属性? computed实例 computed与method的区别关于传参问题 vue计算属性computed方法内传参遇到头疼的vue计算属性传参问题经过各种资料查找,亲测有效 index.vue <van-circle v-model="Ratedata[index].currentRate" color="#2462E8&qu
Vue计算属性与侦听器和过滤器超详细介绍

目录 1. 计算属性 1.1 使用方法 1.2 案例-购物车合计使用计算属性 2. 侦听器 3. 过滤器 1. 计算属性 1.1 使用方法概述: 模板中放入太多的逻辑会让模板过重且难以维护,使用计算属性可以让模板变得简洁易于维护.计算属性是基于它们的响应式依赖进行缓存的,计算属性比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化. 计算属性定义在Vue对象中,通过关键词computed属性对象中定义一个个函数,并返回一个值
Vue计算属性与监视(侦听)属性的使用深度学习

目录计算属性(computed) 监视属性(watch) 监视的两种方法 immediate选项深度监视计算属性(computed) 计算属性指的是通过一系列运算之后,最终得到一个值.这个动态计算出来的属性值可以被模板结构或methods方法使用,案例如下: <div id="root"> R:<input type="text" v-model.number="r"><br> G:<input t
Vue计算属性的学习笔记

本文为大家分享了Vue计算属性的学习笔记,供大家参考,具体内容如下 ①模板内的表达式实际上只用于简单的运算,对于复杂逻辑,使用计算机属性. ②基础例子: <div id = "example"> <p>Original message:"{{message}}"</p> <p>Computed reversed message:"{{reversedMessage}}"</p> <
vue计算属性时v-for处理数组时遇到的一个bug问题

问题 bug: You may have an infinite update loop in a component render function 无限循环 1.需要处理的数组(在 ** ssq **里): bonus_code: ['01', '19', '25', '26', '27', '33', '10'] 2.计算属性 computed: ssqRed: function() { return this.ssq.bonus_code.splice(0, 6) }, ssqBlue:
vue计算属性computed的使用方法示例

本文实例讲述了vue计算属性computed的使用方法.分享给大家供大家参考,具体如下: computed:{ b:function(){ //默认调用get return 值 } } computed:{ b:{ get: set: } } * computed里面可以放置一些业务逻辑代码,一定记得return <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&
vue计算属性和监听器实例解析

基本实例 <div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> var vm = new Vue({ el: '#example', data: { message: 'Hello'
Vue计算属性实现成绩单

本文实例为大家分享了Vue计算属性实现成绩单,供大家参考,具体内容如下代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>成绩单统计</title> <script src="js/vue.js" type="text/javascript" charset="utf-8&quo
Vue 计算属性 computed

目录 1.基础例子 2.计算属性缓存 vs 方法 3.计算属性的 setter 前言: 一般情况下属性都是放到data中的,但是有些属性可能是需要经过一些逻辑计算后才能得出来,那么我们可以把这类属性变成计算属性. 比如以下: <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这个地方,模板不再是简单的声明式逻辑.你必须看一段时间才能意识到,这里是想要显示变量 message
vue计算属性及函数的选择

目录一.计算属性使用场景定义格式普通写法使用格式示例 —— 数组求和 computed有缓存二.总结一.计算属性使用场景从已有的数据A中计算等到的新的数据B,使用计算属性. 如果一个结果需要依赖data中的数据,但是需要经过一些逻辑处理,才能得到你想要的数据.此时就可以使用计算属性. 定义格式在vue实例中,补充computed配置项普通写法 { data(){}, methods: {} // 声明计算属性 computed: { //属性名字(计算属性名称) //属性