当前位置：首页 > VUE

vue实现选择分类

2026-02-25 16:37:20VUE

Vue 实现选择分类的方法

在 Vue 中实现选择分类功能可以通过多种方式完成，以下是一些常见的实现方法：

使用 `v-for` 和 `v-model` 绑定下拉菜单

通过 v-for 动态生成分类选项，并使用 v-model 绑定选中的值：

vue实现选择分类

<template>
  <select v-model="selectedCategory">
    <option v-for="category in categories" :key="category.id" :value="category.id">
      {{ category.name }}
    </option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedCategory: '',
      categories: [
        { id: 1, name: '分类1' },
        { id: 2, name: '分类2' },
        { id: 3, name: '分类3' }
      ]
    };
  }
};
</script>

使用 Vue 组件封装分类选择器

封装一个可复用的分类选择器组件：

<template>
  <div>
    <label for="category-select">选择分类：</label>
    <select id="category-select" v-model="selected" @change="handleChange">
      <option value="">请选择</option>
      <option v-for="item in options" :key="item.value" :value="item.value">
        {{ item.label }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true
    },
    value: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      selected: this.value
    };
  },
  methods: {
    handleChange() {
      this.$emit('input', this.selected);
    }
  },
  watch: {
    value(newVal) {
      this.selected = newVal;
    }
  }
};
</script>

使用第三方 UI 库（如 Element UI）

如果项目中使用 Element UI，可以利用其 el-select 组件：

vue实现选择分类

<template>
  <el-select v-model="selectedCategory" placeholder="请选择分类">
    <el-option
      v-for="item in categories"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selectedCategory: '',
      categories: [
        { value: '1', label: '分类1' },
        { value: '2', label: '分类2' }
      ]
    };
  }
};
</script>

实现多级联动分类选择

对于多级分类（如省市区联动），可以通过监听变化实现：

<template>
  <div>
    <select v-model="selectedProvince" @change="loadCities">
      <option v-for="province in provinces" :key="province.id" :value="province.id">
        {{ province.name }}
      </option>
    </select>

    <select v-model="selectedCity" :disabled="!cities.length">
      <option v-for="city in cities" :key="city.id" :value="city.id">
        {{ city.name }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedProvince: '',
      selectedCity: '',
      provinces: [
        { id: 1, name: '省份1' },
        { id: 2, name: '省份2' }
      ],
      cities: []
    };
  },
  methods: {
    loadCities() {
      // 模拟根据省份加载城市
      this.cities = [
        { id: 1, name: '城市1' },
        { id: 2, name: '城市2' }
      ];
      this.selectedCity = '';
    }
  }
};
</script>

使用计算属性处理分类数据

如果需要根据分类数据进行过滤或计算，可以使用计算属性：

<template>
  <div>
    <select v-model="selectedCategory">
      <option v-for="cat in filteredCategories" :key="cat.id" :value="cat.id">
        {{ cat.name }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedCategory: '',
      allCategories: [
        { id: 1, name: '分类1', active: true },
        { id: 2, name: '分类2', active: false }
      ]
    };
  },
  computed: {
    filteredCategories() {
      return this.allCategories.filter(cat => cat.active);
    }
  }
};
</script>