Maison > Article > interface Web > Résumé de l'utilisation du filtre dans vue

Résumé de l'utilisation du filtre dans vue

php中世界最好的语言original: 2018-05-15 11:42:483923parcourir

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(&#39;cal&#39;, 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

Résumé de lutilisation du filtre dans vue

(1) Exemple 1 de texte original

var app5 = new Vue({
  el: &#39;#app5&#39;,
  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.

Résumé de lutilisation du filtre dans vue

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 :

Explication détaillée de la méthode de traitement du projet Vue compilé et déployé dans le répertoire racine non-site Web

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!

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：Vue détermine l'utilisation des classes dans le domArticle suivant：Vue détermine l'utilisation des classes dans le dom

Articles Liés

Voir plus