javascript - 在 Vue 应用程序上根据条件 v-if 和 else 显示内容

Question

我在 Vue 中有一个包含产品优惠的产品列表。这些优惠将在今天的日期(从开放 API 获取:{{get_date}}})超过到期日(在数据元素 {{product.Expiry_date} 中定义)时到期}) 的产品。

我不确定如何根据条件禁用某些样式并指定产品报价的新样式。假设我想隐藏“立即购买”按钮并将其替换为“此优惠已过期”，并且我想让内容有点不透明。

这是我的:

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

由于我对过期商品和有效商品使用大致相同的内容，只是样式略有不同。有一个更好的方法吗？而不是用不同的类名来指定样式。

Answer 1

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

<div :class="[get_date < product.Expiry_date ? 'valid' : 'expired', 'some-other-class-if-needed']">
  <div class="one">
    {{product.Name}}
  </div>
  <div class="two">
    {{product.Price}}
  </div>
  <div class="three">
    <button v-if="get_date < product.Expiry_date">Buy now</button>
    <div v-else>This offer has Expired!</div>
  </div>
</div>

此外，对于嵌套的 div，您可以在 css 中指定它们，而不是使用类 one_expired、two_expired 等:

.expired .one {
  /* style for "one_expired" */
}
.expired .two {
  /* style for "two_expired" */
}