在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中文網其他相關文章！
