Vue下拉框默认选中某个值详解

一、下拉框默认选中某个值

当我们需要在Vue下拉框中默认选中某个值时，可以通过给v-model绑定一个默认值实现：

<template>
  <div>
    <label>请选择:</label>
    <select v-model="selected">
      <option value="1">选项1</option>
      <option value="2">选项2</option>
      <option value="3">选项3</option>
    </select>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selected: '2' //默认选中选项2
    }
  }
}
</script>

以上代码中，我们通过在data中设置selected的值为'2'，来实现下拉框默认选中选项2。

二、Vue下拉框默认选中第一个

有时候我们需要在Vue下拉框中默认选中第一个选项，可以直接将v-model绑定为第一个选项的值：

<template>
  <div>
    <label>请选择:</label>
    <select v-model="selected">
      <option value="1">选项1</option>
      <option value="2">选项2</option>
      <option value="3">选项3</option>
    </select>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selected: '1' //默认选中选项1
    }
  }
}
</script>

以上代码中，我们将selected的值设置为'1'，来实现默认选中第一个选项。

三、Vue下拉框默认值设置

除了直接在data中设置selected的值来实现默认选中某个选项外，也可以通过计算属性来实现默认值的设置。

<template>
  <div>
    <label>请选择:</label>
    <select v-model="selected">
      <option v-for="(option, index) in options" :key="index" :value="option">{{ option }}</option>
    </select>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedOption: '选项2',
      options: ['选项1', '选项2', '选项3']
    }
  },
  computed: {
    selected() { //计算属性
      return this.options.indexOf(this.selectedOption) !== -1 ? this.selectedOption : this.options[0];
    }
  }
}
</script>

以上代码中，我们在data中定义了一个selectedOption的值为'选项2'，在options中定义了下拉框中的所有选项。在计算属性中，我们判断selectedOption是否存在于options中，如果存在则返回selectedOption的值，如果不存在，则返回第一个选项的值。这样就实现了默认选中某个选项的效果。

四、总结

Vue下拉框默认选中某个值非常简单，我们可以直接在data中设置selected的值为要选中的选项的value，也可以通过计算属性来实现。除此之外，Vue默认选中第一个选项也很方便，直接将selected的值设置为第一个选项的value即可。希望本文对Vue下拉框默认选中某个值有所帮助。