作者：亿商侣2026-05-15 16:02

在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实例
    constmySelect = this.$refs.mySelect.$el
    // 设置默认值为选项三
    mySelect.setValue('3')
   }
}
</script>

以上代码中，我们在mounted生命周期中获取了select实例，并将其赋值给变量mySelect。接着，我们调用Select组件的setValue方法并传入参数3来设置默认选项为选项三。

总结

通过v-model和ref我们可以分别实现静态和动态的下拉选择框默认值设置。在实际开发中，可以根据需要选择不同的方式来方便用户的使用。

以上内容来源于网络及用户投稿，亿商侣仅提供整理发布服务，版权归原作者所有，如有侵权请联系删除，本网站主要提供南阳东霖信息技术有限公司旗下产品展示及技术分享服务