Base
Semblable à une directive personnalisée, un filtre personnalisé peut être enregistré auprès de la méthode globale Vue.Filter (), qui prend deux paramètres: l'ID de filtre et la fonction de filtre. La fonction de filtre prend la valeur en tant que paramètre et renvoie la valeur convertie:
Vue.filter ('reverse', fonction (valeur) {return value.split (''). Reverse (). Join ('')})<! - 'abc' => 'cba' -> <span v-text = "message | reverse"> </span>
La fonction de filtre peut recevoir n'importe quel nombre de paramètres:
Vue.filter ('wrap', fonction (valeur, begin, end) {return Begin + valeur + end})<! - 'Hello' => 'AVANT HELLO After' -> <span v-tex
Filtre bidirectionnel
Actuellement, nous utilisons des filtres pour convertir la valeur du modèle avant de l'afficher dans la vue. Cependant, il est également possible de définir un filtre qui convertit la valeur à partir de la vue (élément <fort>) avant de la remettre au modèle:
Vue.filter ('CurrencyDisplay', {// Model -> View // Formater la valeur avant de mettre à jour le `<fort>` élément lire: fonction (val) {return '$' + val.tofixed (2)}, // View -> modèle // format la valeur avant d'écrire les données écrites: fonction (val, oldval) {var numéro = + Val.replace. isnan (numéro)?Paramètres dynamiques
Si le paramètre du filtre n'est pas enveloppé dans les devis, il sera calculé dynamiquement dans la portée de la machine virtuelle actuelle. De plus, cela de la fonction filtrante pointe toujours vers la machine virtuelle qui l'appelle. Par exemple:
<input v-model = "userInput"> <span> {{msg | concat userInput}} </span> Vue.filter ('concat', fonction (valeur, entrée) {// `input` ===` this.UserInput` RETOUR VALUE + INPUT})L'exemple ci-dessus est relativement simple, et vous pouvez également utiliser des expressions pour obtenir le même résultat, mais pour une logique plus complexe, plus d'une instruction est requise, et vous devez le mettre dans une propriété calculée ou un filtre personnalisé.
Filtres intégrés Filterby et OrderBy Filtre / Tri des tableaux entrants basés sur l'état actuel de l'instance Vue à laquelle il appartient.
Cet article a été compilé dans le tutoriel d'apprentissage des composants frontaux "Vue.js", et tout le monde est le bienvenu pour apprendre et lire.
Pour les tutoriels sur les composants Vue.js, veuillez cliquer sur le tutoriel d'apprentissage de la composante Vue.js spéciale pour apprendre.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.