Vue.js选择占位符

当我们需要让用户从一组选项中进行选择时，可使用选择占位符（Select placeholder），它提供了一种美观而易于使用的方式。Vue.js提供了一种简单的方法来实现这一功能。

在单选框中使用

在单选框中使用选择占位符，需要使用v-model指令来绑定选中的值，同时使用v-for指令遍历选项。代码如下：

<template>
  <div>
    <label for="fruit">选择你的水果：</label>
    <select id="fruit" v-model="selected">
      <option disabled value="">请选择</option>
      <option v-for="option in options" :value="option.value">{{ option.text }}</option>
    </select>
    <p>你选择的是：{{ selected }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: '',
      options: [
        { value: 'apple', text: '苹果' },
        { value: 'banana', text: '香蕉' },
        { value: 'orange', text: '橙子' }
      ]
    };
  }
};
</script>

这里我们使用了一个disabled选项作为占位符，它不能被选中。可以看到占位符的文本是“请选择”，选中选项后，文字会改变为对应的选项文本。当选中的值为空字符串时，占位符即为当前选中的值。

在多选框中使用

在多选框中使用选择占位符，需要使用v-model指令绑定选中的值的数组。同样使用v-for指令遍历选项。代码如下：

<template>
  <div>
    <label>选择你喜欢的水果：</label>
    <select multiple v-model="selected">
      <option disabled value="">请选择</option>
      <option v-for="option in options" :value="option.value">{{ option.text }}</option>
    </select>
    <p>你选择的水果有：</p>
    <ul>
      <li v-for="(fruit, index) in selected" :key="index">{{ fruit }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: [],
      options: [
        { value: 'apple', text: '苹果' },
        { value: 'banana', text: '香蕉' },
        { value: 'orange', text: '橙子' },
        { value: 'watermelon', text: '西瓜' }
      ]
    };
  }
};
</script>

这里我们同样使用了一个disabled选项作为占位符，当选中的值为空数组时，占位符即为当前选中的值。

总结

选择占位符在一些场景下可以提高用户使用体验，Vue.js通过disabled选项的方式实现了这一功能。