Maison >interface Web >js tutoriel >Exemples détaillés sur la façon de créer et d'utiliser des filtres personnalisés vue

Exemples détaillés sur la façon de créer et d'utiliser des filtres personnalisés vue

小云云original: 2018-05-18 16:23:182820parcourir

Cet article présente principalement en détail la création et l'utilisation de filtres personnalisés de vue. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère qu'il pourra aider tout le monde.

Filtre : Il existe de nombreux exemples dans la vie, purificateur d'eau et purificateur d'air.

Le rôle du filtre : filtrer, filtrer et formater les données.

La version vue1.* a des filtres intégrés, mais dans vue2.* toutes les versions n'ont plus de filtres intégrés.

1. Création de filtre

L'essence du filtre est une méthode avec des paramètres et une valeur de retour

　　new Vue({
　　　　filters:{
　　　　　　myCurrency:function(myInput){
　　　　　　　　return 处理后的数据
　　　　　　}
　　　　}
　　})

2. Utilisation du filtre

Syntaxe :
　2cfd83bcbfaff9bacc12c0937fd77054{{expression | filter}}fe444642c29a30e898f3de4e0f1d7b5b

Par exemple :
　4a249f0d628e2318394fd9b75b4636b1{{price | myCurrency}}473f0a7621bec819994bb5020d29372a

3. Utilisation avancée des filtres

Lors de l'utilisation du filtrage Lorsque vous utilisez le filtre, vous peut également spécifier des paramètres pour indiquer au filtre de filtrer les données en fonction des paramètres.

①Comment passer des paramètres au filtre ?

4a249f0d628e2318394fd9b75b4636b1{{price | myCurrency('￥',true)}}473f0a7621bec819994bb5020d29372a

②Comment filtrer dans Reçu ?

new Vue({
　　filters:{
　　　　//myInput是通过管道传来的数据
　　　　//arg1在调用过滤器时在圆括号中第一个参数
　　　　//arg2在调用过滤器时在圆括号中第二个参数
　　　　myCurrency:function(myInput,arg1,arg2){
　　　　　　return 处理后的数据
　　　　}

　　}

})

Code :

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <script src="js/vue.js"></script>
 <title></title>
</head>
<body>

<p id="container">
 <p>{{msg}}</p>
 <h1>{{price}}</h1>
 <h1>{{price | myCurrency(&#39;￥&#39;)}}</h1>
</p>

<script>
 // filter
 new Vue({
  el: &#39;#container&#39;,
  data: {
   msg: &#39;Hello Vue&#39;,
   price:356
  },
  //过滤器的本质 就是一个有参数有返回值的方法
  filters:{
   myCurrency:function(myInput,arg1){
    console.log(arg1);
    //根据业务需要，对传来的数据进行处理
    // 并返回处理后的结果
    var result = arg1+myInput;
    return result;
   }
  }
 })
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <script src="js/vue.js"></script>
 <title></title>
</head>
<body>

<p id="container">
 <p>{{msg}}</p>
 <h1>{{name | myTextTransform(false)}}</h1>
</p>

<script>
 new Vue({
  el: &#39;#container&#39;,
  data: {
   msg: &#39;Hello Vue&#39;,
   name:&#39;Michael&#39;
  },
  filters:{
   myTextTransform: function (myInput,isUpper) {
    if(isUpper)
    {
     return myInput.toUpperCase();
    }
    else{
     return myInput.toLowerCase();
    }
   }
  }
 })
</script>

</body>
</html>

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>过滤器</title>
 <script src="js/vue.js"></script>
 </head>
 <body>
 <p id="container">
  <p>{{msg}}</p>
  <h1>{{price}}</h1>
  <h1>{{price|myCurrency}}</h1>
 </p>
 <script>
  new Vue({
   el:"#container",
   data:{
    msg:"Hello VueJs",
    price:356
   },
//过滤器的本质 就是一个有参数有返回值的方法
   filters:{
    myCurrency:function(myInput){
     var result = "$"+myInput;
     return result;
    }
   }
  })
 </script>
 </body>
</html>

Le dernier exemple est codé en dur.

Recommandations associées :

Explication détaillée des filtres Angularjs pour implémenter des fonctions de recherche et de tri dynamiques

À propos du filtre dans le servlet JavaWeb Exemple d'analyse

Exemple détaillé d'explication des mécanismes de filtre, d'écouteur et d'intercepteur en Java

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!

Java servlet Filter

Déclaration：

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

Article précédent：Exemple détaillé de la façon dont Angular implémente l'affichage récursif des commentaires de blog et obtient des données pour les commentaires de réponseArticle suivant：Exemple détaillé de la façon dont Angular implémente l'affichage récursif des commentaires de blog et obtient des données pour les commentaires de réponse

Articles Liés

Voir plus