Home > Article > Web Front-end > How to use filters in the Vue2.0 series?

How to use filters in the Vue2.0 series?

亚连Original: 2018-06-02 10:11:512527browse

This article mainly introduces the use of filters in the Vue2.0 series. Now I share it with you and give you a reference.

vue2.0 has abandoned filters and requires custom filters for some common text formatting.

It feels super easy to use! !

Filters can be used in two places: double curly brace interpolation and v-bind expressions.

Filters should be added at the end of JavaScript expressions, indicated by the pipe character.

1. Register a global filter

Notes:
1. Register a custom filter with the global method Vue.filter() The filter must be placed before vue instantiation
2. The filter function always takes the value of the expression as the first parameter. Parameters with quotes are treated as strings, and parameters without quotes are calculated according to the expression
3. Two filter parameters can be set, provided that the processing of the two filters does not conflict.
4. The data input by the user from the input can also be processed before being transmitted to the model.

Case

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>过滤器</title>
</head>
<body>

<p id="app">
  <!-- 首字符串大写 -->
  <p>首字母大写过滤器：{{str | upcase}}</p>
  <!-- 给过滤器传入参数 -->
  <p>求和过滤器：{{message | sum(10,20)}}</p> 
</p>

<script type="text/javascript" src=&#39;https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js&#39;></script>
<script type="text/javascript">
    //全局方法 Vue.filter()注册一个自定义过滤器,必须放在Vue实例化前面
    // 注册一个首字母大写的过滤器
    Vue.filter("upcase", function(value) { 
        if (!value) return &#39;&#39;
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
    });
    // 全局注册一个求和过滤器
    Vue.filter(&#39;sum&#39;, function (value, a, b) {
      return value + a + b;
    });

    var demo = new Vue({
      el: "#app",
      data: {
        str:&#39;hello&#39;,
        message:12
      }
    });
</script>
</body>
</html>

Case effect:

2. Register inside the instantiation

Filtering The controller can also be registered inside an instance, only in the instance that uses it.

Adapted from the above case:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

<p id="app">
  <!-- 首字符串大写 -->
  <p>首字母大写过滤器：{{str | upcase}}</p>
  <!-- 给过滤器传入参数 -->
  <p>求和过滤器：{{message | sum(10,20)}}</p> 
</p>

<script type="text/javascript" src=&#39;https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js&#39;></script>
<script type="text/javascript">
    var demo = new Vue({
      el: "#app",
      data: {
        str:&#39;hello&#39;,
        message:12
      },
      filters: {
        upcase:function(value){
          if (!value) return &#39;&#39;
          value = value.toString()
          return value.charAt(0).toUpperCase() + value.slice(1)
        },
        sum:function(value, a, b){
          return value + a + b;
        }
      }
    });

</script>
</body>
</html>

Effect:

##3. Common filters

Convert to time format based on timestamp: mm-dd hh:tt

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

<p id="app">
  <!-- 将时间戳转化为时间 -->
  <h1>根据时间戳转化为时间：{{ str | formateTime}}</h1>
</p>

<script type="text/javascript" src=&#39;https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js&#39;></script>
<script type="text/javascript">
    var demo = new Vue({
      el: "#app",
      data: {
        str:1517568434324,
      },
      filters: {
        formateTime:function(nS){
          return ((new Date(nS).getMonth()+1)<10?&#39;0&#39;+(new Date(nS).getMonth()+1):(new Date(nS).getMonth()+1)) + &#39;-&#39; + (new Date(nS).getDate()<10?&#39;0&#39;+new Date(nS).getDate():new Date(nS).getDate()) + &#39; &#39; + (new Date(nS).getHours()<10?&#39;0&#39;+new Date(nS).getHours():new Date(nS).getHours()) + &#39;:&#39; + (new Date(nS).getMinutes()<10?&#39;0&#39;+new Date(nS).getMinutes():new Date(nS).getMinutes())
        }
      }
    });

</script>
</body>
</html>

Case effect:

The above is me I compiled it for everyone, I hope it will be helpful to everyone in the future.

About how to insert variable parameters in vue.js tag attributes (detailed tutorial)

About How to close a component by clicking outside the component in Vue (detailed tutorial)

Detailed solution for you to solve the problem of white screen on the homepage after vue build is packaged (detailed tutorial)

The above is the detailed content of How to use filters in the Vue2.0 series?. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use vue to determine the class of domNext article：How to use vue to determine the class of dom

See more

How to use filters in the Vue2.0 series?

Related articles