vue computed传参

在Vue中，computed计算属性是不能直接传递参数的。这是因为computed计算属性在渲染开始时就会被计算并保存在缓存中，只有涉及到的数据发生变动时才会重新计算。因此，computed计算属性不需要传参，可以像普通属性一样在DOM中调用。

然而，如果你非要传递参数，你可以使用JavaScript的闭包来实现。你可以在computed属性里返回一个函数，并在这个函数内使用闭包来接受参数。下面是一个示例：

var vm = new Vue({
  el: '#app',
  data: {
    base: 0
  },
  computed: {
    add: function() {
      return function(param) { // 返回一个函数
        alert("add");
        return this.base + param; // 在闭包中使用参数和数据
      }
    }
  }
})

在上面的例子中，我们将参数 `param` 传递给了computed属性 `add` 返回的函数，然后在闭包中使用了这个参数和数据 `base` 进行计算。

请注意，由于闭包中的作用域问题，我们需要使用箭头函数或将闭包函数保存在一个变量中来确保 `this` 的指向正确。

相关问题

vue computed 传参

在Vue中，computed属性是一种便捷的方式来定义一个可响应的属性，它可以根据其依赖的数据自动更新。但是computed属性默认是不支持传递参数的。

如果你需要在computed属性中传递参数，你可以使用一个方法来替代computed属性。在Vue组件中，你可以定义一个方法，并通过调用这个方法并传入参数来获取计算结果。

下面是一个示例：

<template>
  <div>
    <p>输入一个数字：</p>
    <input type="number" v-model="number">
    <p>计算结果为：{{ calculateResult(number) }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 0
    };
  },
  methods: {
    calculateResult(num) {
      // 在这里进行计算并返回结果
      return num * 2;
    }
  }
};
</script>

在上面的示例中，我们通过`v-model`指令将输入框的值与`number`数据属性进行了双向绑定。然后，在模板中通过调用`calculateResult()`方法并传入`number`参数来获取计算结果。

请注意，方法是实时计算的，而不是像computed属性一样进行缓存。如果你需要缓存计算结果以提高性能，你可以使用一个计算属性来实现，但是无法直接传递参数给计算属性。你可以将参数作为数据属性，并在计算属性中引用该数据属性来实现类似的效果。

vue3computed传参

在Vue3中，我们可以使用计算属性来传递参数。下面是一个例子：

<template>
  <div>
    <div v-for="item in list" :key="item.id">
      <div v-if="isShow(item.id)">是否显示</div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    const currentId = ref(null)

    const isShow = computed(() => {
      return (id) => {
        return currentId.value === id
      }
    })

    return {
      list: [
        { id: 1 },
        { id: 2 },
        { id: 3 }
      ],
      currentId,
      isShow
    }
  }
}
</script>

在这个例子中，我们使用了`computed`函数来创建一个计算属性`isShow`，并且在`setup`函数中返回了`list`、`currentId`和`isShow`。在模板中，我们使用`v-for`指令来遍历`list`数组，并且使用`:key`指令来为每个元素指定一个唯一的键。在`v-if`指令中，我们调用了`isShow`计算属性，并且传递了`item.id`作为参数。

当`currentId`的值发生变化时，`isShow`计算属性会重新计算，并且根据新的`currentId`值来判断是否显示元素。