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下拉框默认选中某个值有所帮助。