vue 中计算属性可以接收参数

乐容

已于 2024-09-03 11:49:54 修改

阅读量300

点赞数 2

文章标签： vue.js javascript 前端

于 2024-09-03 11:48:30 首次发布

本文链接：https://blog.csdn.net/m0_61265297/article/details/141857602

版权

代码中的value就是接收的参数
计算属性要接收参数要写在返回的时候  


computed: {
    isButtonDisabled() {
      return (value) => {
        const num = parseInt(value);
        return isNaN(num) || num < 0
      }

    },
   
  },


//计算属性

   aaa(){
      return (value) =>{
        写逻辑

        return 返回值
      }
    }

使用

<el-button size="mini" type="primary" icon="el-icon-edit" @click="handleUpdateYes2"  :disabled="isButtonDisabled(this.selectedIndex)"> </el-button>

<template>
  <h2>计算属性是否带参</h2>
  <div>不带参：result -> {{ result }}</div>
  <br />
  <div>
    参数为5，但使用错误会报错：errResult(5) <br />
    <br />
    报错提示 errResult is not a function
    <!-- {{ errResult(5) }} -->
  </div>
  <br />
  <div>参数为5：sucResult(5) -> {{ sucResult(5) }}</div>
  <br />
  <div>参数为9：sucResult(9) -> {{ sucResult(9) }}</div>
</template>



<script>
export default {
  data() {
    return {
      num: 10
    };
  },
  computed: {
    result() {
      return this.num * 2;
    },
    errResult(e) {
      // 报错，提示 errResult is not a function
      return this.num * e;
    },
    sucResult() {
      // 在返回的函数这边传入形参
      return (e) => {
        return this.num * e;
      };
    }
  },
}
</script>

结果