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

Explication détaillée de l'instance de filtre de filtre de vue

亚连
Libérer: 2018-05-30 15:22:00
original
1909 Les gens l'ont consulté

VueJs fournit une API de filtrage puissante qui peut effectuer divers processus de filtrage sur les données et renvoyer les résultats requis. Cet article présente principalement des exemples de filtres Vue. Les amis intéressés devraient apprendre ensemble.

Les filtres Vue sont généralement à la fin des expressions JavaScript, indiqués par le symbole "|" :

Les filtres peuvent créer notre le code est plus beau et peut généralement être utilisé pour le formatage de l'heure, la mise en majuscule des premières lettres, etc.

Par exemple : {{ date | dateFormat }}这 c'est comment écrire un filtre {{ dateFormat(date) }}C'est comment écrire un appel de fonction

On voit que la façon d'écrire un filtre est plus sémantique ; , permettant aux gens de le voir d'un seul coup d'œil.

<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<p v-bind:id="rawId | formatId"></p>
<!-- 也可以串联多个过滤器 -->
{{ message | filterA | filterB }}
Copier après la connexion

// Dans cet exemple, filterA est défini comme une fonction de filtre qui reçoit un seul paramètre, et la valeur du message d'expression sera transmise en tant que paramètre dans la fonction. Continuez ensuite à appeler la fonction de filtre filterB, qui est également définie pour recevoir un seul paramètre, et transmettez le résultat de filterA à filterB

<!-- 过滤器接收参数 -->
{{ message | capitalize(&#39;string&#39;, obj) }}
Copier après la connexion


// Les paramètres ici commenceront à partir du deuxième paramètre de la fonction de filtre. Le premier paramètre est le message de valeur à filtrer, c'est-à-dire que 'string' est le deuxième paramètre et obj est le troisième paramètre. .

Après avoir reçu les paramètres de la méthode de filtrage, vous pouvez effectuer une série de traitements au sein de la méthode et enfin renvoyer les résultats du traitement.

1. Les filtres peuvent être

filters: {
 capitalize: function (value) {
 if (!value) return &#39;&#39;
 value = value.toString()
 return value.charAt(0).toUpperCase() + value.slice(1)
 }
}
Copier après la connexion

2. dans la Vue globale

Vue.filter(&#39;capitalize&#39;, function (value) {
 if (!value) return &#39;&#39;
 value = value.toString()
 return value.charAt(0).toUpperCase() + value.slice(1)
})
Copier après la connexion

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

explication détaillée de la superposition de souris echarts mettant en évidence les noms de nœuds et de relations

vue implémente le copier-coller du contenu Méthode du presse-papiers du tableau

Méthode Vue pour obtenir l'itinéraire actuellement activé

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!