Comment implémenter des formulaires réactifs et des composants de formulaire personnalisés sous Vue ?

Vue est un framework JavaScript couramment utilisé qui fournit des outils très pratiques et puissants pour traiter la saisie de formulaire. Vue fournit des propriétés et des événements réactifs qui nous permettent de gérer facilement la saisie, la validation et la soumission de formulaires. Cet article expliquera comment implémenter des formulaires réactifs et des composants de formulaire personnalisés sous Vue.

1. Implémentation du formulaire réactif Vue

1. Liaison du modèle de formulaire

Vue fournit un moyen très simple de réaliser saisie des données du formulaire et réponse automatique. Grâce à la directive v-model, nous pouvons lier chaque champ de saisie du formulaire aux attributs de données de l'instance Vue pour obtenir une liaison de données bidirectionnelle.

Par exemple : nous pouvons implémenter un formulaire simple via le code suivant, dans lequel la valeur de l'entrée est liée à l'attribut de message dans les données via v-model. Lorsque nous saisissons du contenu dans la zone de saisie, le contenu de la zone de saisie et la valeur de l'attribut de message dans les données seront mis à jour simultanément : ## 🎜🎜#La validation de formulaire est une tâche inévitable dans notre développement web quotidien. Vue fournit également un moyen unique de gérer la validation du formulaire. En combinant l'attribut calculé et l'attribut watcher avec la directive v-model, nous pouvons facilement implémenter la validation des valeurs du formulaire.

Par exemple : nous pouvons mettre en œuvre une simple vérification de formulaire via le code suivant. Lorsque l'utilisateur saisit un mot de passe, nous vérifions le mot de passe via l'attribut calculé et l'attribut watcher, puis demandons à l'utilisateur la force. du mot de passe : #🎜🎜 #

<template>
  <div>
    <input type="text" v-model="message" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "",
    };
  },
};
</script>

Copier après la connexion
Soumission de formulaire

.

<template>
  <div>
    <label>请输入密码：</label>
    <input type="password" v-model="password" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      password: "",
    };
  },

  computed: {
    message() {
      let pwd = this.password;
      if (pwd.length <= 5) return "密码强度较弱";
      if (pwd.length <= 9) return "密码强度一般";
      return "密码强度较高";
    },
  },

  watch: {
    password(newVal, oldVal) {
      console.log(newVal, oldVal);
      if (newVal.length >= 10) {
        alert("密码长度不能超过10");
        this.password = oldVal;
      }
    },
  },
};
</script>

Copier après la connexion
3. 2. Implémentation de composants de formulaire personnalisés

<template>
  <div>
    <label>请输入用户名：</label>
    <input type="text" v-model="username" />

    <label>请输入密码：</label>
    <input type="password" v-model="password" />

    <button v-on:click="submitForm">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },

  methods: {
    submitForm() {
      let formData = {
        username: this.username,
        password: this.password,
      };

      console.log(JSON.stringify(formData));
    },
  },
};
</script>

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!