Maison >interface Web >Voir.js >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
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.
<template> <div> <input type="text" v-model="message" /> <p>{{ message }}</p> </div> </template> <script> export default { data() { return { message: "", }; }, }; </script>
<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>
<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>Résumé : Implémenter des formulaires réactifs et des composants de formulaires personnalisés sous Vue est l'une des compétences essentielles dans notre développement web. Grâce à la liaison de données bidirectionnelle de la directive v-model, à la validation de formulaire de l'attribut calculé, au contrôle d'entrée de formulaire de l'attribut watcher et à la définition de composant de formulaire personnalisé de la méthode Vue.component(), nous pouvons facilement implémenter un Système de traitement de formulaires efficace, puissant et facile à entretenir.
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!