vue中计算属性computed传递参数

vue中computed计算属性无法直接进行传参,如果有传参数的需求可以使用闭包函数(也叫匿名函数)实现。例如传过来不同的状态,我们设置成不同的颜色。(三目运算符可以实现但是只能设置两种,状态多了就不行了)

 :class="statusColor(item.status)"

使用computed

computed: {
    statusColor() {
      return function(val) {
        console.log(val);//根据val进行操作
      };
    },
  },

这里也可以直接写成methods里的方法,但是不推荐使用methods(没有缓存),具体为啥可以看看vue官网method和computed的区别
在这里插入图片描述
在这里插入图片描述

  • 11
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue3 ,可以通过使用 `computed` 函数来创建计算属性,同时,也可以通过为 `computed` 函数传递参数来动态计算属性。 下面是一个简单的示例: ```html <template> <div> <input type="text" v-model="firstName"> <input type="text" v-model="lastName"> <p>Full Name: {{ fullName }}</p> </div> </template> <script> import { computed, reactive } from 'vue'; export default { setup() { const state = reactive({ firstName: '', lastName: '', }); const fullName = computed(() => { return `${state.firstName} ${state.lastName}`; }); return { state, fullName, }; }, }; </script> ``` 在这个示例,我们创建了两个 `input` 元素来输入用户的名字和姓氏。然后,我们定义了一个 `computed` 函数 `fullName`,它返回用户的全名。我们可以在模板引用 `fullName`,并且它会更新当 `firstName` 或 `lastName` 发生变化时。 另外,我们可以在计算属性传递参数。例如,如果我们想要计算用户的名字的长度,我们可以这样做: ```html <template> <div> <input type="text" v-model="firstName"> <input type="text" v-model="lastName"> <p>Full Name: {{ fullName }}</p> <p>Name Length: {{ nameLength(1) }}</p> </div> </template> <script> import { computed, reactive } from 'vue'; export default { setup() { const state = reactive({ firstName: '', lastName: '', }); const fullName = computed(() => { return `${state.firstName} ${state.lastName}`; }); const nameLength = computed(() => { return fullName.value.length; }); return { state, fullName, nameLength, }; }, }; </script> ``` 在这个示例,我们定义了一个新的 `computed` 函数 `nameLength`,它返回用户的名字长度。我们通过在计算属性传递参数来指定要计算哪个名字的长度。在这种情况下,我们通过传递参数 `1` 来计算用户的名字的长度。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值