当前位置：首页 > VUE

vue实现选择品种

2026-01-18 13:42:22VUE

Vue 实现选择品种功能

在 Vue 中实现选择品种功能通常需要结合表单元素（如 <select>、<radio> 或 <checkbox>）和 Vue 的数据绑定特性。以下是几种常见的实现方式：

使用 `<select>` 下拉选择

通过 Vue 的 v-model 绑定下拉选择框的值，动态渲染品种列表。

<template>
  <div>
    <label for="breed">选择品种：</label>
    <select id="breed" v-model="selectedBreed">
      <option v-for="breed in breeds" :key="breed.id" :value="breed.id">
        {{ breed.name }}
      </option>
    </select>
    <p>当前选择：{{ selectedBreed }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedBreed: '',
      breeds: [
        { id: '1', name: '品种A' },
        { id: '2', name: '品种B' },
        { id: '3', name: '品种C' }
      ]
    }
  }
}
</script>

使用单选框（Radio）

适合品种数量较少且需要直观展示的场景。

<template>
  <div>
    <label>选择品种：</label>
    <div v-for="breed in breeds" :key="breed.id">
      <input
        type="radio"
        :id="breed.id"
        :value="breed.id"
        v-model="selectedBreed"
      />
      <label :for="breed.id">{{ breed.name }}</label>
    </div>
    <p>当前选择：{{ selectedBreed }}</p>
  </div>
</template>

使用复选框（Checkbox）

适合多选的场景，需绑定数组类型数据。

<template>
  <div>
    <label>选择品种（多选）：</label>
    <div v-for="breed in breeds" :key="breed.id">
      <input
        type="checkbox"
        :id="breed.id"
        :value="breed.id"
        v-model="selectedBreeds"
      />
      <label :for="breed.id">{{ breed.name }}</label>
    </div>
    <p>当前选择：{{ selectedBreeds }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedBreeds: [],
      breeds: [
        { id: '1', name: '品种A' },
        { id: '2', name: '品种B' },
        { id: '3', name: '品种C' }
      ]
    }
  }
}
</script>

动态加载品种数据

若品种数据需要从后端接口获取，可以使用 axios 或 fetch 异步加载。

<template>
  <div>
    <label for="breed">选择品种：</label>
    <select id="breed" v-model="selectedBreed" :disabled="isLoading">
      <option value="">请选择</option>
      <option v-for="breed in breeds" :key="breed.id" :value="breed.id">
        {{ breed.name }}
      </option>
    </select>
    <p v-if="isLoading">加载中...</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      selectedBreed: '',
      breeds: [],
      isLoading: false
    }
  },
  mounted() {
    this.loadBreeds();
  },
  methods: {
    async loadBreeds() {
      this.isLoading = true;
      try {
        const response = await axios.get('/api/breeds');
        this.breeds = response.data;
      } catch (error) {
        console.error('加载品种失败', error);
      } finally {
        this.isLoading = false;
      }
    }
  }
}
</script>

使用第三方 UI 库

如 Element UI、Ant Design Vue 等，提供更丰富的选择组件。

<template>
  <div>
    <el-select v-model="selectedBreed" placeholder="请选择品种">
      <el-option
        v-for="breed in breeds"
        :key="breed.id"
        :label="breed.name"
        :value="breed.id"
      />
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedBreed: '',
      breeds: [
        { id: '1', name: '品种A' },
        { id: '2', name: '品种B' }
      ]
    }
  }
}
</script>