Comment utiliser le filtre dans vue

Cette fois, je vais vous montrer comment utiliser le filtre en vue. Quelles sont les précautions lors de l'utilisation du filtre en vue. Ce qui suit est un cas pratique, 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) l'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

nbsp;html>


    <meta>
    <title>vue自定义过滤器</title>
    <script></script>
    <meta>


    <p>
      </p><p>{{message | sum}}</p>
      <p>{{message | cal 10 20}}</p> <!--过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算。-->
      <p>{{message | sum | currency }}</p> <!--添加两个过滤器,注意不要冲突-->
      <input> <!--用户从input输入的数据在回传到model之前也可以先处理-->

    <script>
//    -----------------------------------------华丽分割线(从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>

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 :

nbsp;html>


    <meta>
    <title>vue自定义过滤器</title>
    <script></script>
    <meta>


    <p>
      </p><p>{{message | sum}}</p>
      <p>{{message | cal 10 20}}</p> <!--过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算。-->
      <p>{{message | sum | currency }}</p> <!--添加两个过滤器,注意不要冲突-->
      <input> <!--用户从input输入的数据在回传到model之前也可以先处理-->

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

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
      });;
    }
  }
})

  Filter Key       
•       {{ item }}     
  

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 :

Analyse d'un exemple de fichier journal de sortie Node.js+console

Comment utiliser jQuery pour obtenir la souris over La grande photo correspondante s'affiche sur la petite photo du produit

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!