How to use filter in vue

This time I will show you how to use the filter in vue, and what are the precautions for using the filter in vue. The following is a practical case, let's take a look.

1. Custom

filter, of course, this includes registering globally and registering inside instantiation

(1) Registering the global filterer

(1) The global method Vue.filter() registers a custom filter, which must be placed before Vue instantiation

(2) The filter function always ends with

The value of expression serves as the first parameter. Parameters with quotes are treated as strings, while parameters without quotes are calculated as expressions

(3) Two filter parameters can be set, provided that these two filters process There is no conflict

(4) The data input by the user from the input can also be processed before being returned to the model

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>
  

filter will pass in the current item by default, and the first filter Each parameter defaults to the current item.

(2) Register inside the instantiation

The above example is directly registered on the Vue global, and other instances that do not use this filter will also be forced to accept it. In fact, The filter can be registered inside the instance, and is only registered in the instance using it

The above program is rewritten as:

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. Use the iteration function filter

in js

(1) Example 1 Original text

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

The final effect realizes the function of filtering the list based on keywords.

Some other Js iteration methods - filter(), map(), some(), every(), forEach(), lastIndexOf(), indexOf()

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Node.js console output log file example analysis

How to operate jQuery to realize the mouse sliding over the product The corresponding large picture
is displayed on the small picture.

The above is the detailed content of How to use filter in vue. For more information, please follow other related articles on the PHP Chinese website!