Javascript 基于Vue应用程序上的条件v-if和else显示内容

我在Vue中有一个产品列表，其中包含产品优惠。当今天的日期（从打开的API获取：

{{get_date}}

）超过产品的到期日期（在数据元素

{product.expiration_date}}

中定义）时，这些优惠将过期

我不确定如何根据条件禁用某些样式并指定产品提供的新样式。假设我想隐藏buy now按钮，并将其替换为“This offer has expired”，我想让内容有点不透明

这就是我所拥有的：

<template>
  <div class="content">
    <div class="nested" v-for="product in products" 
            :key="product.productNumber">

      <div class="valid" v-if=get_date < product.Expiry_date>
        // Show content 
        <div class="one">
          {{product.Name}}
        </div>
        <div class="two">
          {{product.Price}}
        </div>
        <div class="three">
        <button> Buy now</button>
        </div>
     </div>

     <div class= "expired" v-else>
     // I want the button to be hidden and replaced by "This offer has 
        expired" and the other content to be a bit opaque
      <div class="one_expired">
          {{product.Name}}
        </div>
        <div class="two_expired">
          {{product.Price}}
        </div>
        <div class="three_expired">
        This offer has Expired!
        </div>
      </div>

</template>

<script>
export default {
  mounted: function() {

    axios
      .get("http://worldtimeapi.org/api/timezone/Europe/Berlin", {})
      .then(response => {
        this.date = response.data.datetime;
      })
      .catch(function(error) {
        console.log(error);
      });
  },

  data() {
    return {
      date: "",

      products: [
        {
          ID: 1,
          Name: "Product_1",
          Price: 29,
          Expiry_date: 2019-10-18,
        },
        {
          ID: 2,
          Name: "Product_1",
          Price: 88,
          Expiry_date: 2019-10-12,
        },
      ]
    }
  }
 }
}
</script>

<style scopped>


</style>

// Product 1: Offer is valid
.valid div.one{
   color: blue;     
}
.valid div.two{
  color: blue;          
}

.valid div.three button{
background-color: black;
}


// Product 2: Offer is expired
.expired div.one_expired{
   color: red;    
}
.expired div.two_expired{
  color: red;     
}

.expired{
  opacity: 0.5;  
}

.expired div.three_expired button{
display: none;
}

//显示内容
{{product.Name}
{{product.Price}}
立即购买
//我希望按钮被隐藏，并替换为“此报价已生效”
“过期”和其他内容有点不透明
{{product.Name}
{{product.Price}}
此优惠已过期！
导出默认值{
挂载：函数（）{
axios
.get（“http://worldtimeapi.org/api/timezone/Europe/Berlin", {})
。然后（响应=>{
this.date=response.data.datetime；
})
.catch（函数（错误）{
console.log（错误）；
});
},
数据（）{
返回{
日期：“，
产品：[
{
ID:1，
名称：“产品_1”，
价格:29，
有效期：2019-10-18，
},
{
ID:2，
名称：“产品_1”，
价格：88，
有效期：2019-10-12，
},
]
}
}
}
}
//产品1：优惠有效
.有效第一分区{
颜色：蓝色；
}
.有效第二组{
颜色：蓝色；
}
.有效的三区按钮{
背景色：黑色；
}
//产品2：优惠已过期
.已过期第一册已过期{
颜色：红色；
}
.已过期第二册已过期{
颜色：红色；
}
.过期{
不透明度：0.5；
}
.过期的第三部分\u过期按钮{
显示：无；
}

---

由于我在过期和有效的优惠中使用了或多或少相同的内容，只是风格有点不同。有更好的方法吗？不要用不同的类名指定样式。

只需指定一个条件类名，如：

{{product.Name}
{{product.Price}}
立即购买
此优惠已过期！

另外，对于嵌套的div，您可以在css中指定它们，而不是使用类

one\u expired

、

two\u expired

等：

。过期。一个{
/*“一个_过期”的样式*/
}
.过期了，两个{
/*“两个_过期”的样式*/
}

您只需指定一个条件类名，如：

{{product.Name}
{{product.Price}}
立即购买
此优惠已过期！

另外，对于嵌套的div，您可以在css中指定它们，而不是使用类

one\u expired

、

two\u expired

等：

。过期。一个{
/*“一个_过期”的样式*/
}
.过期了，两个{
/*“两个_过期”的样式*/
}

此外，如果使用

computed

中的条件类逻辑，它将更美观/可读性更强。有关更多信息，您可以检查@M3RS是，同意，但在本例中不是。因为这里我们处于

v-for

循环中，所以不可能有

computed

属性。唯一的方法是调用一个方法。。类似于：

isExpired（product.expiration\u date）

。。但是，我不确定它是否更漂亮或更可读。感谢您的回答，我得到一个错误：

属性或方法“valid”未在实例上定义，而是在渲染期间引用。通过初始化属性

，确保此属性在数据选项中或对于基于类的组件是被动的。有什么想法吗？哦，对不起，忘了在类名周围加引号。。我编辑了我的答案。。应该是

valid'：'expired'

此外，它将更美观/更可读，使用

computed

中的条件类逻辑。有关更多信息，您可以检查@M3RS是，同意，但在本例中不是。因为这里我们处于

v-for

循环中，所以不可能有

computed

属性。唯一的方法是调用一个方法。。类似于：

isExpired（product.expiration\u date）

。。但是，我不确定它是否更漂亮或更可读。感谢您的回答，我得到一个错误：

属性或方法“valid”未在实例上定义，而是在渲染期间引用。通过初始化属性

，确保此属性在数据选项中或对于基于类的组件是被动的。有什么想法吗？哦，对不起，忘了在类名周围加引号。。我编辑了我的答案。。应该是

有效“：”过期“