今天写pc端引入vue，遇到了一个问题，就是我循环出select内的数据以后，发现原本默认显示第一条的select框变成了空白，要选择后才有显示，结果查了好多文档，讲的都不是很清楚，后来看到一句提示，试了一下发现居然还有这种隐藏属性。所以，我决定自己写下来，讲清楚。
在Vue.js中，`<select>`元素的使用和设置默认选中是一个常见的需求，尤其是在处理表单和数据绑定时。本文将详细解析如何在Vue中正确地使用`<select>`并设置默认选中的选项。
`<select>`元素通常与`v-model`指令一起使用，`v-model`用于双向数据绑定，它会将选中的值与Vue实例的数据对象中的某个属性关联起来。在案例中，`v-model`绑定到了`couponSelected`，这意味着当用户选择了一个选项，`couponSelected`的值就会更新为所选选项的值。
```html
<select name="public-choice" v-model="couponSelected" @change="getCouponSelected">
<option :value="coupon.id" v-for="coupon in couponList">{{coupon.name}}</option>
</select>
```
这段HTML代码中，`v-for`用于遍历`couponList`数组，并为每个`coupon`生成一个`<option>`元素。`:value`属性绑定到`coupon.id`，这样当用户选择一个选项时，`couponSelected`将会是对应的`id`值。`{{coupon.name}}`则用于显示选项的文本内容，即`coupon`对象的`name`属性。
Vue实例的`data`对象如下：
```javascript
data: {
couponList: [
{ id: 'A', name: '优惠券 1' },
{ id: '1', name: '优惠券 2' },
{ id: '2', name: '优惠券 3' },
],
couponSelected: '',
},
```
`couponList`是一个包含多个优惠券对象的数组，每个对象都有`id`和`name`属性。`couponSelected`初始化为空字符串，表示默认情况下没有选中任何选项。
为了在页面加载时使第一个选项被默认选中，我们需要在Vue实例的`created`生命周期钩子中设置`couponSelected`的值。这是因为Vue在DOM渲染之前调用`created`，确保在元素显示之前已经设置了默认值。
```javascript
created() {
this.couponSelected = this.couponList[0].id;
}
```
这里的`this.couponSelected = this.couponList[0].id;`语句使得`couponSelected`的值设为`couponList`的第一个元素的`id`，从而在页面加载后自动选中第一个选项。
此外，我们还绑定了`@change`事件监听器，当用户选择新的优惠券时，`getCouponSelected`方法会被调用，可以用来处理用户选择的变化。
```javascript
methods: {
getCouponSelected() {
console.log(this.couponSelected);
}
}
```
`getCouponSelected`方法简单地打印出当前选中的优惠券ID，你可以根据实际需求进行更复杂的逻辑处理。
总结一下，要在Vue中使用`<select>`并设置默认选中项，你需要：
1. 使用`v-model`绑定`select`元素到Vue实例的某个属性。
2. 在`<option>`元素中使用`v-for`遍历数据，并通过`:value`指定每个选项的值。
3. 在Vue实例的`data`对象中初始化这个属性，例如设置为默认选中的选项的值。
4. 如果需要处理用户的选择变化，可以添加`@change`事件监听器并定义相应的方法。
遵循这些步骤，你就能确保在Vue中正确地使用`<select>`并设置默认选中项，避免遇到页面加载后下拉框为空的情况。
