Résumé de l'utilisation du filtre dans vue
Cette fois, je vais vous apporter un résumé de l'utilisation du filtre dans Vue. Quelles sont les précautions lors de l'utilisation du filtre dans Vue. Voici des cas pratiques, jetons un coup d'œil.
1. filtre personnalisé, bien sûr, cela inclut l'enregistrement global et l'enregistrement à l'intérieur de l'instanciation
(1) Enregistrement du filtre global
(1) La méthode globale Vue.filter() enregistre un filtre personnalisé, qui doit être placé avant l'instanciation de Vue
(2) La fonction de filtre se termine toujours par La valeur de l'expression comme premier argument. Les paramètres avec guillemets sont traités comme des chaînes , tandis que les paramètres sans guillemets sont calculés comme des expressions
(3) Deux paramètres de filtre peuvent être définis, à condition que ces deux filtres traitent Il n'y a pas de conflit
(4) Les données saisies par l'utilisateur à partir de l'entrée peuvent également être traitées avant d'être renvoyées au modèle
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue自定义过滤器</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<p class="test">
<p>{{message | sum}}</p>
<p>{{message | cal 10 20}}</p> <!--过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算。-->
<p>{{message | sum | currency }}</p> <!--添加两个过滤器,注意不要冲突-->
<input type="text" v-model="message | change"> <!--用户从input输入的数据在回传到model之前也可以先处理-->
</p>
<script type="text/javascript">
// -----------------------------------------华丽分割线(从model->view)---------------------------------------
Vue.filter("sum", function(value) { //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
return value + 4;
});
Vue.filter('cal', function (value, begin, xing) { //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
return value + begin + xing;
});
// -----------------------------------------华丽分割线(从view->model)---------------------------------------
Vue.filter("change", {
read: function (value) { // model -> view 在更新 `<input>` 元素之前格式化值
return value;
},
write: function (newVal,oldVal) { // view -> model 在写回数据之前格式化值
console.log("newVal:"+newVal);
console.log("oldVal:"+oldVal);
return newVal;
}
});
var myVue = new Vue({
el: ".test",
data: {
message:12
}
});
</script>
</body>
</html>Le filtre passera dans l'élément courant par défaut, et le filtre Le Le premier paramètre est par défaut l'élément actuel.
(2) Enregistré à l'intérieur de l'instanciation
L'exemple ci-dessus est directement enregistré sur Vue global, et les autres instances qui n'utilisent pas ce filtre seront également obligées de acceptez-le. En fait, le filtre peut être enregistré à l'intérieur de l'instance, et n'est enregistré que dans l'instance qui l'utilise
Le programme ci-dessus est réécrit comme suit :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue自定义过滤器</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<p class="test">
<p>{{message | sum}}</p>
<p>{{message | cal 10 20}}</p> <!--过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算。-->
<p>{{message | sum | currency }}</p> <!--添加两个过滤器,注意不要冲突-->
<input type="text" v-model="message | change"> <!--用户从input输入的数据在回传到model之前也可以先处理-->
</p>
<script type="text/javascript">
Vue.filter("change", {
read: function (value) { // model -> view 在更新 `<input>` 元素之前格式化值
return value;
},
write: function (newVal,oldVal) { // view -> model 在写回数据之前格式化值
console.log("newVal:"+newVal);
console.log("oldVal:"+oldVal);
return newVal;
}
});
var myVue = new Vue({
el: ".test",
data: {
message:12
},
filters: {
sum: function (value) {
return value + 4;
},
cal: function (value, begin, xing) {
return value + begin + xing;
}
}
});
</script>
</body>
</html>2. Utilisez le filtre de fonction d'itération en js
(1) Exemple 1 de texte original
var app5 = new Vue({
el: '#app5',
data: {
shoppingList: [
"Milk", "Donuts", "Cookies", "Chocolate", "Peanut Butter", "Pepto Bismol", "Pepto Bismol (Chocolate flavor)", "Pepto Bismol (Cookie flavor)"
],
key: ""
},
computed: {
filterShoppingList: function () {
// `this` points to the vm instance
var key = this.key;
var shoppingList = this.shoppingList;
//在使用filter时需要注意的是，前面调用的是需要使用filter的数组，而给filter函数传入的是数组中的每个item，也就是说filter里面的函数，是每个item要去做的，并将每个结果返回。
return shoppingList.filter(function (item) {
return item.toLowerCase().indexOf(key.toLowerCase()) != -1
});;
}
}
})
<ul>
Filter Key<input type="text" v-model="key">
<li v-for="item in filterShoppingList">
{{ item }}
</li>
</ul>L'effet final réalise la fonction de filtrage de la liste en fonction de mots-clés.
Quelques autres méthodes d'itération Js - filter(), map(), some(), each(), forEach(), lastIndexOf(), indexOf()
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
Vue implémente le terminal mobile Explication détaillée des étapes pour le compte public WeChat
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Analyser l'utilisation et la classification des commentaires JSP
Feb 01, 2024 am 08:01 AM
Classification et analyse de l'utilisation des commentaires JSP Les commentaires JSP sont divisés en deux types : commentaires sur une seule ligne : se terminant par, une seule ligne de code peut être commentée. Commentaires multilignes : commençant par /* et se terminant par */, vous pouvez commenter plusieurs lignes de code. Exemple de commentaire sur une seule ligne Exemple de commentaire sur plusieurs lignes/**Ceci est un commentaire sur plusieurs lignes*Peut commenter plusieurs lignes de code*/Utilisation des commentaires JSP Les commentaires JSP peuvent être utilisés pour commenter le code JSP afin de le rendre plus facile à lire
Résumer l'utilisation de la fonction system() dans le système Linux
Feb 23, 2024 pm 06:45 PM
Résumé de la fonction system() sous Linux Dans le système Linux, la fonction system() est une fonction très couramment utilisée, qui permet d'exécuter des commandes en ligne de commande. Cet article présentera la fonction system() en détail et fournira quelques exemples de code spécifiques. 1. Utilisation de base de la fonction system(). La déclaration de la fonction system() est la suivante : intsystem(constchar*command) où le paramètre de commande est un caractère.
Comment utiliser correctement la fonction exit en langage C
Feb 18, 2024 pm 03:40 PM
Comment utiliser la fonction exit en langage C nécessite des exemples de code spécifiques. En langage C, nous devons souvent terminer l'exécution du programme au début du programme, ou quitter le programme sous certaines conditions. Le langage C fournit la fonction exit() pour implémenter cette fonction. Cet article présentera l'utilisation de la fonction exit() et fournira des exemples de code correspondants. La fonction exit() est une fonction de bibliothèque standard en langage C et est incluse dans le fichier d'en-tête. Sa fonction est de terminer l'exécution du programme, et peut prendre un nombre entier
Utilisation de la fonction WPSdatedif
Feb 20, 2024 pm 10:27 PM
WPS est une suite logicielle bureautique couramment utilisée et la fonction de table WPS est largement utilisée pour le traitement des données et les calculs. Dans le tableau WPS, il existe une fonction très utile, la fonction DATEDIF, qui permet de calculer le décalage horaire entre deux dates. La fonction DATEDIF est l'abréviation du mot anglais DateDifference. Sa syntaxe est la suivante : DATEDIF(start_date,end_date,unit) où start_date représente la date de début.
Introduction aux fonctions Python : utilisation et exemples de fonction abs
Nov 03, 2023 pm 12:05 PM
Introduction aux fonctions Python : utilisation et exemples de la fonction abs 1. Introduction à l'utilisation de la fonction abs En Python, la fonction abs est une fonction intégrée utilisée pour calculer la valeur absolue d'une valeur donnée. Il peut accepter un argument numérique et renvoyer la valeur absolue de ce nombre. La syntaxe de base de la fonction abs est la suivante : abs(x) où x est le paramètre numérique permettant de calculer la valeur absolue, qui peut être un nombre entier ou un nombre à virgule flottante. 2. Exemples de fonction abs Ci-dessous, nous montrerons l'utilisation de la fonction abs à travers quelques exemples spécifiques : Exemple 1 : Calcul
Introduction aux fonctions Python : utilisation et exemples de la fonction isinstance
Nov 04, 2023 pm 03:15 PM
Introduction aux fonctions Python : utilisation et exemples de la fonction isinstance Python est un langage de programmation puissant qui fournit de nombreuses fonctions intégrées pour rendre la programmation plus pratique et efficace. L'une des fonctions intégrées très utiles est la fonction isinstance(). Cet article présentera l'utilisation et des exemples de la fonction isinstance et fournira des exemples de code spécifiques. La fonction isinstance() est utilisée pour déterminer si un objet est une instance d'une classe ou d'un type spécifié. La syntaxe de cette fonction est la suivante
Explication détaillée et introduction à l'utilisation de la fonction MySQL ISNULL
Mar 01, 2024 pm 05:24 PM
La fonction ISNULL() dans MySQL est une fonction utilisée pour déterminer si une expression ou une colonne spécifiée est NULL. Il renvoie une valeur booléenne, 1 si l'expression est NULL, 0 sinon. La fonction ISNULL() peut être utilisée dans l'instruction SELECT ou pour un jugement conditionnel dans la clause WHERE. 1. La syntaxe de base de la fonction ISNULL() : ISNULL(expression) où expression est l'expression permettant de déterminer si elle est NULL ou
Comment utiliser les raccourcis Apple
Feb 18, 2024 pm 05:22 PM
Comment utiliser les commandes de raccourci Apple Avec le développement continu de la technologie, les téléphones mobiles sont devenus un élément indispensable de la vie des gens. Parmi les nombreuses marques de téléphones mobiles, les téléphones mobiles Apple ont toujours été appréciés des utilisateurs pour leurs systèmes stables et leurs fonctions puissantes. Parmi eux, la fonction de commande de raccourci Apple rend l’expérience du téléphone mobile des utilisateurs plus pratique et efficace. Apple Shortcuts est une fonctionnalité lancée par Apple pour iOS12 et les versions ultérieures. Elle aide les utilisateurs à simplifier les opérations de leur téléphone mobile en créant et en exécutant des commandes personnalisées pour obtenir un travail plus efficace et.
