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

小云云

Libérer： 2018-05-18 16:23:18

original

2807 Les gens l'ont consulté

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 处理后的数据
　　　　　　}
　　　　}
　　})

Copier après la connexion

2. Utilisation du filtre

Syntaxe :
　{{expression | filter}}

Par exemple :
　

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 ?

②Comment filtrer dans Reçu ?

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

　　}

})

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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!