如果没有折扣，如何显示原始价格，仅在有 Vue 时才显示折扣价.js

Question

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

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

它是有效的，但我想通过方法来做到这一点。我想在数据中有一个价格变量，它取价格的值，因为我会把它乘以金额来得到总数，而我不能用那个代码来做这件事。

Answer 1

请使用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>

Answer 2

您可以使用条件渲染v-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>