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

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;
    }
 }

然后调用prop

Answer 2

您可以使用计算属性进行此类算术计算。您可以在其中定义一个函数并完全控制组件的所有属性。 关注这个link。你会知道如何做到这一点。

Answer 3

您是否考虑过 Vue JS 中的计算属性？ 参考：[https://vuejs.org/v2/guide/computed.html#Computed-Properties]

这些属性是从数据中派生出来的，并且会在源数据被修改时发生变化。这可能是推荐的方法。

例子：

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>