vue3 computed根据参数不同获取不同的数据

你可以在computed中定义一个函数，这个函数接收一个参数，然后根据该参数的不同返回不同的数据。例如：

computed: {
  getData() {
    return (param) => {
      if (param === 'A') {
        return this.dataA;
      } else if (param === 'B') {
        return this.dataB;
      } else {
        return null;
      }
    };
  }
}

在模板中使用时，可以这样调用：

<div>{{ getData('A') }}</div>
<div>{{ getData('B') }}</div>

这样就可以根据不同的参数获取不同的数据了。

相关问题

vue2computed数据如何传递参数

在Vue2中，computed属性可以接受参数来动态计算数据。你可以使用一个函数来定义computed属性，并在函数中返回一个函数。这个返回的函数可以接受参数，然后根据参数计算并返回相应的值。

下面是一个示例代码，演示了如何在computed属性中传递参数：

data() {
  return {
    status: 1
  }
},
computed: {
  statusCom() {
    return (val) => {
      let result = '';
      switch (val) {
        case 1:
          result = 'New';
          break;
        case 2:
          result = 'In progress';
          break;
        case 3:
          result = 'Inactive';
          break;
        case 4:
          result = 'Close';
          break;
        case 5:
          result = 'Complete';
          break;
      }
      return result;
    }
  }
}

在模板中通过调用statusCom方法，并传入参数来获取动态计算的值：

<template>
  <div>
    <p>Status: {{ statusCom(status) }}</p>
  </div>
</template>

在上述代码中，computed属性statusCom返回了一个函数，这个函数接受一个参数val，并根据val的值计算并返回相应的状态名称。

vue computed 参数

Vue 的 computed 属性可以用于定义计算属性，它由一个函数和一个键名组成，函数的返回值可以根据依赖进行缓存，只有当依赖的值发生变化时才会重新计算。computed 属性中的函数可以接受参数，参数是其所依赖的其它计算属性或者普通属性的值，这些参数也可以是一个方法，通过在方法中返回参数值来动态获取。

举个例子，有一个数据对象 data，其中有两个值分别为 num1 和 num2，我们可以通过 computed 来定义一个计算属性 sum，计算 num1 和 num2 的和，代码如下：

var vm = new Vue({
  el: '#app',
  data: {
    num1: 1,
    num2: 2
  },
  computed: {
    sum: function () {
      return this.num1 + this.num2
    }
  }
})

此时，我们可以通过 vm.sum 来访问计算属性 sum 的值，它的值为 3。当 num1 或 num2 的值发生变化时，sum 也会重新计算。