前端Vue select下拉框使用以及监听事件详解

<template>
  <!--div独占一行-->
    <div class="dropdown-container">
      <span>评分：</span>
      <select v-model="selectedNumber" class="dropdown">
        <option v-for="option in options" :key="option.value" :value="option.value">
          {{ option.label }}
        </option>
      </select>
      （默认满分5分）
    </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: 5, // 用于接口调用的实际值
      options: [ // 下拉框的选项，模拟接口返回的值，包含显示的标签和实际的值
        { label: '1分', value: 1 },
        { label: '2分', value: 2 },
        { label: '3分', value: 3 },
        { label: '4分', value: 4 },
        { label: '5分', value: 5 }
      ]
    };
  },
  methods: {
    // 你可以在这里添加一个方法来处理选项选择后的操作，例如调用接口
    handleSelection() {
      // 使用 this.selectedValue 作为调用接口的参数
      console.log("Selected value for API call:", this.selectedValue);
      // 这里添加调用接口的代码
    }
  },
  watch: {
    // 监听 selectedValue 的变化，以便在值改变时执行某些操作
    selectedValue(newValue) {
      this.handleSelection();
    }
  }
};
</script>

<style>
  .dropdown-container{
    display: block;
    margin-top: 20px;/*外边距20px，做到独占一行 */
  }

  .dropdown {
    width: 25%;
  }
</style>

<template>
  <select v-model="selectedOption" @change="handleChange">
    <option v-for="option in options" :key="option.value" :value="option.value">
      {{ option.text }}
    </option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [ /* 选项数据 */ ]
    };
  },
  methods: {
    handleChange(event) {
      // 处理选项变化
      console.log("Selected option changed to:", this.selectedOption);
    }
  }
};
</script>

         <Card>
          <Select v-model="typeSelect" style="width:150px;float: right;z-index:999;position: relative" placeholder="请选择指标" @click="changeType()">
            <Option v-for="type in typeArray" :value="type.value" :key="type.label">{{ type.label }}</Option>
          </Select>
          <chart-card :stats-data="playTypePie"></chart-card>
        </Card>

    changeType:function (){
      console.log('您选择了', this.typeSelect)
    },