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

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 }}

// 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) }}

// 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 ''
 value = value.toString()
 return value.charAt(0).toUpperCase() + value.slice(1)
 }
}

2. dans la Vue globale

Vue.filter('capitalize', function (value) {
 if (!value) return ''
 value = value.toString()
 return value.charAt(0).toUpperCase() + value.slice(1)
})

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!