我正在創建一個簡單的計算器，用于在欄位中輸入價格時計算折扣百分比，我有兩種不同的折扣型別。
- 如果價格在
10-90范圍內，您將獲得 50% 的折扣。 - 如果價格在
100-900范圍內，您將獲得 90% 的折扣。
問題：當我100在輸入欄位中輸入時，兩種型別都被選中，我的目標是只選擇第二種型別的折扣。
代碼沙盒
uj5u.com熱心網友回復：
您可以將折扣傳遞給您的方法：
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>uj5u.com熱心網友回復：
好吧，問題是 setActiveRange 函式正在按照您撰寫的方式作業 - 基本上，每次滿足“總計 > 價格”條件時它都會回傳 true。洗掉那部分，它會作業。代碼示例：
methods: {
setActiveRange(min, max) {
let total = this.price;
if (total && total >= min && total <= max) {
return true;
}
}
}
uj5u.com熱心網友回復：
您可以使用簡單的 if-else 陳述句來檢查值的范圍
if(price => 10 && price <= 90){
//get 50% Discount
}else if(price => 100 && price <= 900){
//get 90%Discount
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/339790.html
標籤：javascript Vue.js