vue利用 select 怎么实现获取value和lable

Vue Select 组件

在Vue中实现Select组件需要用到vue-select组件库，使用npm包管理器进行安装

      npm install vue-select --save
    

基本用法

下面是一个基本的使用vue-select组件的例子:

获取值和标签

要获取Select中选中的值和标签，需要监听Select的change事件，并通过回调函数获取选中值及其标签

      <template>
        <div>
          <v-select
            v-model="selected"
            :options="options"
            @input="handleChange"
          ></v-select>
        </div>
      </template>

      <script>
      import vSelect from 'vue-select'

      export default {
        components: {
          vSelect
      },
      data: ()=> ({
          selected: null,
          options: [
            { label: '北京', value: 'beijing' },
            { label: '上海', value: 'shanghai' },
            { label: '广州', value: 'guangzhou' },
            { label: '深圳', value: 'shenzhen' },
          ]
        }),
        methods: {
          handleChange(val) {
            console.log('选中值:', val.value)
            console.log('选中标签:', val.label)
          }
        }
      }
      </script>
    

多选Select的值和标签

多选Select的获取值和标签也需要通过监听change事件，并通过回调函数返回选中值及其标签。注意，多选Select返回的值和标签是一个对象数组。

      <template>
        <div>
          <v-select
            v-model="selected"
            multiple
            :options="options"
            @input="handleChange"
          ></v-select>
        </div>
      </template>

      <script>
      import vSelect from 'vue-select'

      export default {
        components: {
          vSelect
      },
      data: ()=> ({
          selected: null,
          options: [
            { label: '北京', value: 'beijing' },
            { label: '上海', value: 'shanghai' },
            { label: '广州', value: 'guangzhou' },
            { label: '深圳', value: 'shenzhen' },
          ]
        }),
        methods: {
          handleChange(val) {
            console.log('选中值:', val.map(obj=> obj.value))
            console.log('选中标签:', val.map(obj=> obj.label))
          }
        }
      }
      </script>
    

总结

Vue Select组件是一个非常好用的Select组件，通过监听Input事件，可以轻松获取选中值及其标签。

对于多选Select，返回的值和标签是对象数组。