Comment configurer un formulaire caché dans vue

Avant-propos

Dans le développement front-end, les formulaires sont un élément indispensable. Ils nous aident à collecter des informations sur les utilisateurs et à obtenir des effets interactifs. Cependant, il existe certaines situations, telles que la nécessité de télécharger des fichiers de manière asynchrone. À ce stade, nous devons télécharger le fichier sans actualiser la page. À ce stade, le formulaire peut être masqué pour obtenir une actualisation partielle.

Alors comment implémenter la fonction de masquage du formulaire dans Vue ? Cet article présentera trois méthodes, à savoir v-show, v-if et calculée. Les principes de mise en œuvre des trois sont légèrement différents, veuillez voir ci-dessous pour plus de détails.

1. Utilisez la commande v-show

La commande v-show contrôle uniquement l'affichage et le masquage lors du rendu du DOM. Cependant, les éléments d'affichage existent toujours dans la structure DOM, mais le style est différent.

Exemple de code :

<template>
  <div>
    <button @click="isShowForm = !isShowForm">显示/隐藏表单</button>
    <form v-show="isShowForm" @submit.prevent="handleSubmit">
      <input type="text" placeholder="请输入您的姓名" v-model="name" />
      <button type="submit">提交</button>
    </form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShowForm: false,
      name: '',
    };
  },
  methods: {
    handleSubmit() {
      console.log(this.name);
      this.isShowForm = false;
    },
  },
};
</script>

L'implémentation du code ci-dessus est très simple, utilisant un bouton pour contrôler l'affichage et le masquage du formulaire. L'instruction v-show lie directement les données à isShowForm et détermine si le formulaire est affiché en fonction de la valeur vraie ou fausse de sa valeur.

2. Utilisez l'instruction v-if

L'instruction v-if est encore relativement courante pour contrôler l'affichage et le masquage des éléments. La différence est qu'elle ajoute/supprime des éléments du DOM.

Exemple de code :

<template>
  <div>
    <button @click="isShowForm = !isShowForm">显示/隐藏表单</button>
    <template v-if="isShowForm">
      <form @submit.prevent="handleSubmit">
        <input type="text" v-model="name" placeholder="请输入您的姓名" />
        <button type="submit">提交</button>
      </form>
    </template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShowForm: false,
      name: '',
    };
  },
  methods: {
    handleSubmit() {
      console.log(this.name);
      this.isShowForm = false;
    },
  },
};
</script>

Différent de v-show, v-if ajoute/supprime des éléments DOM à l'arborescence de génération DOM. Par conséquent, l'utilisation de v-if peut réduire la consommation de ressources lorsque l'élément n'est pas rendu sur la page.

3. Utiliser les propriétés calculées

Bien que les propriétés calculées soient implémentées de la même manière que les méthodes, leur mécanisme de mise en cache est différent des méthodes. Autrement dit, une propriété calculée ne sera réévaluée que lorsque ses dépendances changeront et, en raison de son cache, lorsque plusieurs composants appellent la même propriété calculée, elle ne sera évaluée qu'une seule fois. Par conséquent, l'utilisation de propriétés calculées peut permettre une optimisation efficace des performances dans Vue.js.

Exemple de code :

<template>
  <div>
    <button @click="toggleForm">显示/隐藏表单</button>
    <form @submit.prevent="handleSubmit" v-if="shouldShowForm">
      <input type="text" v-model="name" placeholder="请输入您的姓名" />
      <button type="submit">提交</button>
    </form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShowForm: false,
      name: '',
    };
  },
  computed: {
    shouldShowForm: function() {
      return this.isShowForm;
    },
  },
  methods: {
    toggleForm() {
      this.isShowForm = !this.isShowForm;
    },
    handleSubmit() {
      console.log(this.name);
      this.isShowForm = false;
    },
  },
};
</script>

Dans l'exemple ci-dessus, nous encapsulons une fonction de méthode dans une propriété calculée. En raison de la fonctionnalité de mise en cache des propriétés calculées, la valeur ShouldShowModal sera activement recalculée uniquement lorsque la valeur isShowForm change de manière synchrone.

Résumé

Ces trois méthodes peuvent toutes avoir pour effet de masquer le formulaire. v-show est implémenté en contrôlant l'affichage et le masquage des styles CSS ; v-if ajoute/supprime des éléments à l'arborescence DOM ; calcule la valeur isShowForm dans l'attribut calculé. Différentes approches peuvent être adoptées pour différents scénarios.

Bien sûr, si nous avons seulement besoin de masquer un certain contrôle de formulaire, nous pouvons également utiliser les styles v-model et css pour y parvenir. Par conséquent, pour des problèmes tels que le masquage de formulaires, choisir la méthode la plus simple et la plus efficace en fonction des besoins réels est la meilleure solution.

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!