Vue中select下拉框搭配

v-model实现动态绑定

Vue中的select下拉框可以通过v-model来动态绑定选中的值。如下所示：

<template>
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option v-for="(item,index) in options" :key="index" :value="item.value">{{item.label}}</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selected: '',
      options: [
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' },
        { label: '选项3', value: '3' }
      ]
    };
  }
};
</script>

在上面的代码中，通过v-model来绑定select下拉框的选中值，options数组中存放了选项的内容和值，通过v-for来遍历数组，将选项渲染到下拉框中。

通过computed计算属性实现动态渲染

有时候，我们需要根据某些条件动态渲染下拉框的选项。这时，可以通过computed计算属性来实现。如下所示：

<template>
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option v-for="(item,index) in options" :key="index" :value="item.value">{{item.label}}</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selected: '',
      options: [
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' },
        { label: '选项3', value: '3' }
      ],
      showOption3: false
    };
  },
  computed: {
    computedOptions() {
      if (this.showOption3) {
        return this.options;
      } else {
        return this.options.filter((item) => item.value !== '3');
      }
    }
  }
};
</script>

在上面的代码中，通过computed计算属性来动态渲染选项。computedOptions方法根据showOption3的值来判断是否渲染选项3，返回的数组会重新渲染下拉框中的选项。

通过watch监听选中值的变化

当选中的值发生变化时，我们可能需要触发某些事件或者更新其他组件的状态。这时可以通过watch来监听选中值的变化。如下所示：

<template>
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option v-for="(item,index) in options" :key="index" :value="item.value">{{item.label}}</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selected: '',
      options: [
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' },
        { label: '选项3', value: '3' }
      ]
    };
  },
  watch: {
    selected(val) {
      console.log(val);
    }
  }
};
</script>

在上面的代码中，通过watch来监听选中值的变化，当选中值发生变化时，会触发selected方法，并打印出选中的值。