<div class="dimension-section no-border-radius margin-top-2">
<div class="dimension-size"></div>
<div>
<ul>
<li v-on:click="display = !display" @click="getPartingCharges('5-10')" :class="{ active: isActiveClass, }" class="product-list">5-10 </li>
<li @click="getPartingCharges('10-22')" :class="{ active: isActiveClass,}" class="product-list">10-22 </li>
<li @click="getPartingCharges('22-27')" :class="{ active: isActiveClass, }" class="product-list">22-27</li>
</ul> <span v-if="display">charges will be applied</span>
</div>
</div>When a user selects a quantity range like 5-10, 10-22, or 22-27 from the list of 3 li tags, a corresponding message needs to be displayed. If the user selects 5-10, then a message stating that charges apply should be shown. For selections of 10-22 or 22-27, a message stating that no charges apply should be displayed. This logic can be implemented using if else conditions.