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下拉框默認選中某個值有所幫助。