vue实现价格区间
Vue 实现价格区间选择功能
在 Vue 中实现价格区间选择功能，可以通过使用滑块组件或手动输入框来实现。以下是几种常见的方法：
使用滑块组件实现价格区间
安装 vue-slider-component 库：
npm install vue-slider-component --save在组件中使用：
<template>
<div>
<vue-slider
v-model="value"
:min="0"
:max="1000"
:interval="10"
tooltip="always"
/>
<div>价格区间：{{ value[0] }} - {{ value[1] }}</div>
</div>
</template>
<script>
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'
export default {
components: {
VueSlider,
},
data() {
return {
value: [100, 500],
}
},
}
</script>使用输入框实现价格区间
<template>
<div>
<input type="number" v-model="minPrice" placeholder="最低价" />
<input type="number" v-model="maxPrice" placeholder="最高价" />
<button @click="handleSubmit">确定</button>
</div>
</template>
<script>
export default {
data() {
return {
minPrice: 0,
maxPrice: 1000,
}
},
methods: {
handleSubmit() {
if (this.minPrice > this.maxPrice) {
alert('最低价不能大于最高价')
return
}
this.$emit('price-change', [this.minPrice, this.maxPrice])
},
},
}
</script>使用 Element UI 的滑块组件
如果项目中使用 Element UI，可以直接使用其提供的滑块组件：
<template>
<div>
<el-slider
v-model="value"
range
:min="0"
:max="1000"
/>
<div>价格区间：{{ value[0] }} - {{ value[1] }}</div>
</div>
</template>
<script>
export default {
data() {
return {
value: [100, 500],
}
},
}
</script>实现价格区间筛选功能
结合上述组件，可以进一步实现价格筛选功能：
<template>
<div>
<vue-slider
v-model="priceRange"
:min="0"
:max="1000"
:interval="10"
tooltip="always"
/>
<div>价格区间：{{ priceRange[0] }} - {{ priceRange[1] }}</div>
<button @click="filterProducts">筛选</button>
</div>
</template>
<script>
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'
export default {
components: {
VueSlider,
},
data() {
return {
priceRange: [100, 500],
products: [
{ id: 1, name: '商品A', price: 200 },
{ id: 2, name: '商品B', price: 400 },
{ id: 3, name: '商品C', price: 600 },
],
filteredProducts: [],
}
},
methods: {
filterProducts() {
this.filteredProducts = this.products.filter(
(product) =>
product.price >= this.priceRange[0] &&
product.price <= this.priceRange[1]
)
},
},
}
</script>这些方法可以根据项目需求选择适合的实现方式，滑块组件适合直观展示价格区间，而输入框则适合精确输入。
