Comment définir la valeur par défaut dans Uniapp

Dans le développement d'Uniapp, nous utilisons souvent la zone de sélection déroulante (sélectionner) sur la page, et parfois nous devons définir des options par défaut pour faciliter les opérations des utilisateurs. Cet article explique comment définir la valeur par défaut de la zone de sélection déroulante dans uniapp.

1. Utilisez le v-model pour lier des données dans les deux sens

Dans vue, le v-model est généralement utilisé pour réaliser une liaison bidirectionnelle d'entrée, de sélection et d'autres formes éléments. v-model mettra automatiquement à jour les données des composants, afin que nous puissions définir une valeur d'option par défaut dans data et la lier à v-model. L'exemple de code est le suivant :

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

Dans le code ci-dessus, nous définissons la valeur de l'option par défaut sur 2, de sorte que la zone de sélection déroulante sur la page sélectionne l'option deux par défaut. Si vous devez modifier les options par défaut, il vous suffit de modifier la valeur sélectionnée dans data.

2. Utilisez ref pour obtenir l'instance de sélection

Parfois, nous devons définir dynamiquement la valeur par défaut de la zone de sélection déroulante dans le code. peut obtenir l'instance de sélection via ref et appeler la méthode setValue du composant Select pour définir la valeur par défaut. L'exemple de code est le suivant :

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

Dans le code ci-dessus, nous obtenons l'instance select dans le cycle de vie monté et l'attribuons à la variable mySelect. Ensuite, nous appelons la méthode setValue du composant Select et passons le paramètre 3 pour définir l'option par défaut sur l'option trois.

Summary

Grâce à v-model et ref, nous pouvons implémenter respectivement les paramètres de valeur par défaut de la boîte de sélection déroulante statique et dynamique. En développement réel, différentes méthodes peuvent être sélectionnées en fonction des besoins pour faciliter l'utilisation par l'utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!