uniapp怎麼設定select預設值

在uniapp開發中，我們經常會使用到頁面中的下拉選擇框（select），而有時我們需要設定預設選項來方便使用者的操作。本文將介紹如何在uniapp中設定下拉選擇框的預設值。

一、使用v-model雙向綁定資料

在vue中，通常使用v-model來實作input、select等表單元素的雙向綁定。 v-model會自動更新元件數據，因此我們可以在data裡定義一個預設選項的值，並將其與v-model綁定。範例程式碼如下：

<template>
  <select v-model="selected">
    <option value="1">选项一</option>
    <option value="2">选项二</option>
    <option value="3">选项三</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selected: '2' // 设置默认选项为选项二
    }
  }
}
</script>

以上程式碼中，我們將預設選項的值設為2，因此頁面中的下拉選擇框預設選取選項二。如果需要修改預設選項，只需要修改data中的selected值即可。

二、使用ref取得select實例

有時候我們需要在程式碼中動態設定下拉選擇框的預設值，這時我們可以透過ref取得select實例，並呼叫Select元件的setValue方法來設定預設值。範例程式碼如下：

<template>
  <select ref="mySelect">
    <option value="1">选项一</option>
    <option value="2">选项二</option>
    <option value="3">选项三</option>
  </select>
</template>

<script>
export default {
  mounted() {
    // 获取select实例
    const mySelect = this.$refs.mySelect.$el
    // 设置默认值为选项三
    mySelect.setValue('3')
  }
}
</script>

以上程式碼中，我們在mounted生命週期中取得了select實例，並將其賦值給變數mySelect。接著，我們呼叫Select組件的setValue方法並傳入參數3來設定預設選項為選項三。

總結

透過v-model和ref我們可以分別實現靜態和動態的下拉選擇框預設值設定。在實際開發中，可以根據需要選擇不同的方式來方便使用者的使用。

以上是uniapp怎麼設定select預設值的詳細內容。更多資訊請關注PHP中文網其他相關文章！