How to set the select default value in uniapp

In uniapp development, we often use the drop-down selection box (select) on the page, and sometimes we need to set default options to facilitate user operations. This article will introduce how to set the default value of the drop-down selection box in uniapp.

1. Use v-model to bind data in two directions

In vue, v-model is usually used to achieve two-way binding of form elements such as input and select. v-model will automatically update component data, so we can define a default option value in data and bind it to v-model. The sample code is as follows:

<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>

In the above code, we set the value of the default option to 2, so the drop-down selection box on the page selects option two by default. If you need to modify the default options, you only need to modify the selected value in data.

2. Use ref to get the select instance

Sometimes we need to dynamically set the default value of the drop-down selection box in the code. At this time, we can get the select instance through ref and call the Select component. setValue method to set the default value. The sample code is as follows:

<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>

In the above code, we obtain the select instance in the mounted life cycle and assign it to the variable mySelect. Next, we call the setValue method of the Select component and pass in parameter 3 to set the default option to option three.

Summary

Through v-model and ref we can achieve static and dynamic default value settings of the drop-down selection box respectively. In actual development, different methods can be selected according to needs to facilitate user use.

The above is the detailed content of How to set the select default value in uniapp. For more information, please follow other related articles on the PHP Chinese website!