如何使用 Vue.js 检查值是否在数字范围内

Question

I am creating a simple calculator which calculates the discount percentage when entering the price in the field, I have two different discount types.

1. If the price is in 10-90 range you get a 50%-discount.
2. If the price is in 100-900 range you get a 90%-discount.

Problem: When I am entering 100 in the input field both type is selected, my aim is to select only second type of discount.

Code SandBox

Answer 1

You can pass discount to your method:

 new Vue({ el: '#demo', data() { return { price: "", cascadeSugg: [ { id: 3, title: "10-90USD take 50% discount", min: 10, max: 90, discount: 50, created_at: "2021-10-28T03:04:33.000000Z", updated_at: "2021-10-28T03:41:49.000000Z", start_date: "2021-10-28", end_date: "2021-10-31", }, { id: 4, title: "100-900USD take 90% discount", min: 100, max: 200, discount: 90, created_at: "2021-10-28T03:54:28.000000Z", updated_at: "2021-10-28T03:54:28.000000Z", start_date: "2021-10-28", end_date: "2021-10-31", }, ], }; }, methods: { setActiveRange(min, max, disc) { let total = this.price; if(total && total <= 99 && total >= min) { return true } else if ((total && total >= 100 && disc > 50)) { return true; } }, }, }) Vue.config.productionTip = false Vue.config.devtools = false

 #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } .active { color: #F48245; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <div class="cascade-discount"> <input type="text" v-model="price" /> <div class="cascade-item" v-for="cascade in cascadeSugg" :key="cascade.id" > <p class="m-0" :class="{ active: setActiveRange(cascade.min, cascade.max, cascade.discount) }" > {{ cascade.title }} </p> </div> </div> </div>

Answer 2

Well, the problem is that setActiveRange function is working as you have written it - basically, it will return true every time the 'total > price' condition is fulfilled. Remove that part and it is gonna work. Code sample:

 methods: {
    setActiveRange(min, max) {
      let total = this.price;
      if (total && total >= min && total <= max) {
        return true;
      }
    }
  }

Answer 3

You can use a simple if-else statement to check the range of the values

if(price => 10 && price <= 90){
//get 50% Discount
}else if(price => 100 && price <= 900){
//get 90%Discount
}