如何在没有折扣的情况下显示原价，只有在有 Vue.js 时才显示折扣价答案

【问题标题】：How to show original price if there's no discount and show discount price only if there's Vue.js如何在没有折扣的情况下显示原价，只有在有 Vue.js 时才显示折扣价
【发布时间】：2021-01-10 15:51:48
【问题描述】：

我有一个这样的对象数组：

orders : [
{
          id: 1,
          image: require("./assets/imgs/product1.png"),
          originalPrice: 40,
          discountPrice: "",
          buyBtn: require("./assets/icons/buy.svg"),
          likeBtn: require("./assets/icons/like.svg"),
          productName: "Marianna Collection",
          productRating: "★★☆☆☆",
          class: "new"
        },
        {
          id: 2,
          
          image: require("./assets/imgs/product2.png"),
          originalPrice: 60,
          discountPrice: 30,
          buyBtn: require("./assets/icons/buy.svg"),
          likeBtn: require("./assets/icons/like.svg"),
          productName: "Marianna Collection",
          productRating: "★★☆☆☆",
          class: "new"
        },
]

现在我想做的只是在我的购物车中显示一个价格，所以我想说：

    if discountPrice ! = '' show discountPrice else show originalPrice

这是我尝试过的：

<td class="tg-lqy6"   :class="order.discountPrice != '' ? 'exist' : ''" id="originalPrice">{{ order.originalPrice }} sr</td>
<td class="tg-lqy6"   :class="order.discountPrice != '' ? 'exist' : ''" id="discountPrice">{{ order.discountPrice }} sr</td>

并设置如下样式：

#originalPrice.exist{
    display: none !important;
}
#discountPrice{
    display: none !important;   
}
#discountPrice.exist{
    display: block !important;
}

它正在工作，但我想通过方法来做到这一点。我想在数据中有一个价格变量来获取价格的值，因为我会将它乘以金额来获得总数，而我无法使用该代码执行此操作。

【问题讨论】：

不太清楚你想要实现什么。你能指定更好吗？尽量不要将数字与字符串混合。正如 kako-jun 在回答中所说，最好设置 discountPrice = -1 或 discountPrice = null 以使此属性无效。在标签类属性比较中使用：:class="order.discountPrice > -1 ? 'exist' : ''" 或:class="order.discountPrice != null ? 'exist' : ''"

标签： javascript vue.js vuejs2 vue-component dom-events

【解决方案1】：

你可以使用conditional renderingv-if/v-else：

<td class="tg-lqy6" v-if="order.discountPrice === ''"  >{{ order.originalPrice }} sr</td>
<td class="tg-lqy6" v-else  >{{ order.discountPrice }} sr</td>

【讨论】：

<td>{order.discountPrice||order.originalPrice}</td> 不工作吗？
非常感谢，我添加了一个我尝试过的解决方案，可以让我计算出你可以检查的数量
我的回答有帮助吗？
真的很抱歉，我不是故意粗鲁的，是的，这很有帮助，但我只是创建了一个函数，因为我打算将这个值用于其他数据

【解决方案2】：

请使用v-if。

<td class="tg-lqy6" v-if="order.discountPrice !== ''" id="discountPrice">{{ order.discountPrice }} sr</td>
<td class="tg-lqy6" v-else id="originalPrice">{{ order.originalPrice }} sr</td>

您无需向 CSS 中添加任何内容。

discountPrice 不能是字符串或数字类型。 discountPrice 的初始值应该是-1。

<td class="tg-lqy6" v-if="order.discountPrice >= 0" id="discountPrice">{{ order.discountPrice }} sr</td>
<td class="tg-lqy6" v-else id="originalPrice">{{ order.originalPrice }} sr</td>

【讨论】：

好的很好编辑这个非常感谢你，我添加了一个我试过的解决方案，可以让我计算出你可以检查的数量
@AhmedSarhan 如果答案有帮助，您可以投票赞成，无需说谢谢