Question

我有一个看起来像这样的表：

<el-table
:data="info"
class="myform"
stripe
style="width: 100%">
<el-table-column
  prop="location_name"
  label="Name"
  width="180">
</el-table-column>
<el-table-column
  v-if="promoActive"
  prop="original_price"
  label="Original Price"
  width="180">
</el-table-column>
<el-table-column
  prop="spaces_available"
  label="Spaces"
  width="180">
</el-table-column>
<el-table-column
  v-if="promoActive"
  prop="discount_value"
  label="Discount Value"
  width="180">
</el-table-column>
</el-table-column>
<el-table-column
  v-if="promoActive"
  label="Final Price"
  width="180">
</el-table-column>
</el-table>

我正在尝试使最后一个表格列的支持值等于最终价格，即最终价格减去原始价格。但是，当我这样放置道具时，它不起作用：

<el-table-column
  v-if="promoActive"
  prop="(original_price - discount_value)"
  label="Final Price"
  width="180">
</el-table-column>

解决此问题的最佳方法是什么？

Answer 1

您可以使用计算属性，例如

    computed:{
       calculate(){
       return this.prop1 - this.prop2;
    }
 }

然后叫道具

Answer 2

您可以将计算属性用于这种类型的算术计算。您可以在其中定义函数并完全控制组件的所有属性。遵循此https://vuejs.org/v2/guide/computed.html#Computed-Properties]。您将了解如何做到这一点。

Answer 3

您是否考虑过Vue JS中的计算属性？请参阅：[{{3}}

这些属性是从数据派生的，并且在修改源数据时都会更改。这可能是推荐的方法。

示例：

computed:{
       finalPrize : function () {
                       return this.original_price - this.discount_value;
                     }
       }

Answer 4

首先，prop="(original_price - discount_value)"不起作用的原因是，除非使用prop语法，否则v-bind属性将被视为文本。所以这应该工作：

v-bind:prop="(original_price - discount_value)"

但是，VueJS中的computed properties可以用来将所有这些计算逻辑从模板中抽象出来：您可以在其中执行计算，只需使用v-bind directive进行绑定元素的计算值。让我们将您的计算属性命名为finalPrice。在您的VueJS应用/组件代码中，您可以执行以下操作：

computed: {
    finalPrice() {
        return this.original_price - this.discount_value;
    }
}

然后，更新您的标记以使用v-bind:prop="finalPrice"：

<el-table-column
  v-if="promoActive"
  v-bind:prop="finalPrice"
  label="Final Price"
  width="180">
</el-table-column>

p / s：如果您更喜欢使用速记，则不用担心：:prop="finalPrice"（请注意:前缀）在语法上与v-bind:prop="finalPrice"相同。

不建议使用，但仍可使用：如果您想传递参数来执行计算，则可以改用方法：

method: {
    calculateFinalPrice(original, discount) {
        return original- discount;
    }
}

您的标记将是：

<el-table-column
  v-if="promoActive"
  v-bind:prop="calculateFinalPrice(original_price, discount_value)"
  label="Final Price"
  width="180">
</el-table-column>

如何在Vue.js中算术组合道具？

4 个答案: