Comment définir dynamiquement la valeur initiale à l'aide de la balise d'entrée dans Uniapp

Pendant le processus de développement de l'utilisation d'uniapp, nous rencontrons souvent le besoin de définir la valeur initiale dans la balise d'entrée. Cependant, en raison de la nature particulière de la balise d'entrée dans uniapp, la méthode ordinaire de définition de la valeur initiale ne fonctionne pas. Alors, comment résoudre ce problème ? Dans cet article, nous présenterons quelques méthodes pour définir dynamiquement la valeur initiale des balises d'entrée.

Méthode 1 : Utiliser la liaison bidirectionnelle v-model

Dans uniapp, vous pouvez utiliser l'instruction v-model pour obtenir une liaison bidirectionnelle de données. Nous pouvons lier la valeur initiale de la balise d'entrée aux données. Les étapes spécifiques sont les suivantes :

1. Pré-définir une variable dans data pour stocker la valeur initiale de la balise d'entrée.

<template>
  <input v-model="value" />
</template>
<script>
  export default {
    data () {
      return {
        value: '' // 用于存储input的初始值
      }
    }
  }
</script>

2. Dans la fonction hook créée ou montée, obtenez simplement la valeur initiale à définir et mettez à jour la variable de valeur en appelant l'interface ou d'autres méthodes.

<script>
  export default {
    data () {
      return {
        value: '' // 用于存储input的初始值
      }
    },
    mounted () {
      // 通过接口获取要设置的初始值
      const initData = 'abc'
      this.value = initData // 更新value变量
    }
  }
</script>

De cette façon, lorsque la balise d'entrée est rendue, la valeur à l'intérieur sera automatiquement définie sur la valeur initiale stockée dans la variable de valeur.

Il convient de noter que lorsque vous utilisez v-model pour une liaison bidirectionnelle, vous devez vous assurer que l'attribut value de la balise d'entrée existe. Par conséquent, une valeur par défaut peut être définie dans la balise d'entrée, sinon des résultats inattendus se produiront.

Méthode 2 : utiliser la référence ref

En plus de la liaison bidirectionnelle v-model, vous pouvez également utiliser des références ref pour définir dynamiquement la valeur initiale de la balise d'entrée. Les étapes spécifiques sont les suivantes :

1. Utilisez la directive ref dans le modèle pour définir un nom de référence unique pour la balise d'entrée.

<template>
  <input ref="myInput" />
</template>

2. Dans la fonction hook créée ou montée, définissez dynamiquement la valeur initiale de la balise d'entrée en exploitant cette référence.

<script>
  export default {
    mounted () {
      const initData = 'abc'
      this.$refs.myInput.value = initData // 设置input标签的初始值
    }
  }
</script>

De cette façon, lorsque la balise d'entrée est rendue, la valeur à l'intérieur sera définie dynamiquement sur la valeur initiale souhaitée.

Il convient de noter que lors de l'utilisation d'une référence ref pour définir la valeur initiale de la balise d'entrée, elle doit être utilisée dans la fonction hook montée. Parce que c'est le moment où le composant termine le rendu, la référence ref peut obtenir le véritable nœud DOM.

Résumé

Dans uniapp, grâce à la liaison bidirectionnelle v-model et à la référence de référence, nous pouvons facilement définir dynamiquement la valeur initiale de la balise d'entrée. La méthode spécifique peut être sélectionnée en fonction de la situation réelle. J'espère que cet article sera utile à tout le monde !

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!