Maison > interface Web > js tutoriel > le corps du texte

Comment créer un composant Tab en utilisant vue

亚连
Libérer: 2018-06-22 14:48:52
original
1386 Les gens l'ont consulté

Cet article vous présente principalement les informations pertinentes sur l'utilisation des composants vue pour personnaliser le v-model afin d'implémenter un composant Tab. L'article le présente en détail à travers un exemple de code, qui a une certaine valeur d'apprentissage de référence pour l'étude ou le travail de chacun. qui en ont besoin, veuillez suivre l'éditeur pour apprendre ensemble.

Avant-propos

J'ai appris vue récemment et j'ai vu des composants personnalisés aujourd'hui. J'ai eu du mal pendant un moment, puis j'ai soudainement réalisé. .Tutoriel officiel écrit Ce n'est pas très détaillé, j'ai donc décidé de le résumer. Pas grand chose à dire ci-dessous, jetons un œil à l’introduction détaillée.

Effet

Jetons d'abord un coup d'œil à l'effet de l'exemple !


v-model

Nous savons que v-model est une commande dans vue. Le v-model de Vue est une commande très puissante, qui peut automatiquement rendre la valeur native. du composant de formulaire est automatiquement lié à la valeur que vous choisissez. Il peut être utilisé sur la balise d'entrée pour effectuer une liaison bidirectionnelle de données, comme ceci :

<input v-model="tab">
Copier après la connexion

v-model est en fait une syntaxe Sugar. , vous pouvez aussi écrire comme ceci :

<input :value="tab" :input="tab = $event.target.value">
Copier après la connexion

Comme vous pouvez le voir, il s'agit simplement de passer un paramètre : valeur et suivi d'un événement @input.

Si vous avez une telle exigence, vous devez utiliser v-model sur vos propres composants, comme ceci :

<Tab v-model="tab"></Tab>
Copier après la connexion

Comment l'implémenter ?

Maintenant que nous savons que le v-model est du sucre de syntaxe, nous pouvons d'abord connaître les paramètres obtenus au sein du composant.

<!-- Tab.vue --->
<modèle>
<p class="tab">
<p>Vous pouvez essayer d'imprimer cette valeur
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!