Vue Computed计算属性传参数

最新推荐文章于 2024-11-14 09:00:00 发布

原创最新推荐文章于 2024-11-14 09:00:00 发布 · 584 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 同时被 3 个专栏收录

4 篇文章

订阅专栏

Vue

4 篇文章

订阅专栏

Element ui

3 篇文章

订阅专栏

本文介绍在Vue.js框架中如何巧妙地利用闭包函数实现Computed属性传递参数，解决直接传参不可行的问题，通过具体代码示例展示实现过程。

Vue Computed计算属性传参数

Vue中的Computed属性是无法直接传参数的，看网上有其他办法，现记录一下；

实现原理：使用闭包函数来实现；
部分实现代码如下：

<template>
...
<el-form-item>
       <el-input type="number" :placeholder="intervalValuePlaceholder(item)" v-model.number="item.minAmt"
                 class="input-value">
       </el-input>
       <p style="font-size:12px;line-height:30px;color:#999;">Tips : 不填默认为0</p>
</el-form-item>
...
</template>
<script>
...
computed: {
      intervalValuePlaceholder () {
        return function (item) {
          return item.intervalValueType === 1 ? '区间下限(万元)' : '区间下限(百分比)'
        }
      }
    },
...
</script>