当前位置：首页 > VUE

vue实现选择分类

2026-01-07 00:32:47VUE

Vue 实现选择分类的方法

使用 v-model 绑定选择值

在 Vue 中可以通过 v-model 指令实现双向数据绑定，适用于下拉选择框（<select>）。以下是一个基本示例：

<template>
  <select v-model="selectedCategory">
    <option disabled value="">请选择分类</option>
    <option v-for="category in categories" :value="category.id">
      {{ category.name }}
    </option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedCategory: '',
      categories: [
        { id: 1, name: '电子产品' },
        { id: 2, name: '家居用品' }
      ]
    }
  }
}
</script>

动态加载分类数据

若分类数据需从接口获取，可使用 axios 或 fetch 异步加载：

<script>
import axios from 'axios';

export default {
  data() {
    return {
      selectedCategory: '',
      categories: []
    }
  },
  async created() {
    const response = await axios.get('/api/categories');
    this.categories = response.data;
  }
}
</script>

级联选择实现

对于多级分类（如省市区三级联动），可结合 @change 事件动态加载下一级数据：

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

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

<script>
export default {
  data() {
    return {
      province: null,
      city: null,
      provinces: [],
      cities: []
    }
  },
  methods: {
    async loadCities() {
      const response = await axios.get(`/api/cities?province=${this.province}`);
      this.cities = response.data;
    }
  }
}
</script>

使用第三方组件

对于复杂场景，可选用现成组件库：

Element UI 的 Cascader 级联选择器：

<el-cascader :options="categories" v-model="selectedIds"></el-cascader>

Vuetify 的 v-select：

<v-select :items="categories" item-text="name" item-value="id" label="分类"></v-select>

自定义样式与验证

通过 Vue 的样式绑定和计算属性实现交互效果：

<template>
  <select 
    v-model="selectedCategory" 
    :class="{ 'error-border': !isValid }"
    @blur="validate">
  </select>
</template>

<script>
export default {
  computed: {
    isValid() {
      return !!this.selectedCategory;
    }
  },
  methods: {
    validate() {
      if (!this.isValid) console.log('请选择分类');
    }
  }
}
</script>

vue实现选择分类