时间戳

首页 > 解决方案 > 如何在没有折扣的情况下显示原价，只有在有 Vue.js 时才显示折扣价

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

问题描述

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

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

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

标签： javascriptvue.jsvuejs2vue-componentdom-events

解决方案

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

推荐阅读