suchen

Heim >Web-Frontend >js-Tutorial >Wie verwende ich Filter in der Vue2.0-Serie?

Wie verwende ich Filter in der Vue2.0-Serie?

亚连
亚连Original
2018-06-02 10:11:512559Durchsuche

Dieser Artikel stellt hauptsächlich die Verwendung von Filtern in der Vue2.0-Serie vor. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

vue2.0 verzichtet auf Filter und erfordert benutzerdefinierte Filter für einige gängige Textformatierungen.

Es fühlt sich super einfach an! !

Filter können an zwei Stellen verwendet werden: Interpolation mit doppelten Klammern und V-Bind-Ausdrücke.

Filter sollten am Ende von JavaScript-Ausdrücken hinzugefügt werden, was durch das Pipe-Zeichen gekennzeichnet ist.

1. Registrieren Sie einen globalen Filter

Hinweise:
1. Registrieren Sie einen benutzerdefinierten Filter mit der globalen Methode Vue.filter(). Filter, muss vor der Vue-Instanziierung platziert werden
2. Die Filterfunktion verwendet immer den Wert des Ausdrucks als ersten Parameter. Parameter mit Anführungszeichen werden als Zeichenfolgen behandelt, während Parameter ohne Anführungszeichen gemäß dem Ausdruck
3 berechnet werden . Es können zwei Filterparameter eingestellt werden, sofern die Verarbeitung der beiden Filter nicht kollidiert
4. Die vom Benutzer eingegebenen Daten können auch verarbeitet werden, bevor sie an das Modell übergeben werden

Fall

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

Falleffekt:

2. Registrieren Sie sich innerhalb der Instanziierung

Filterung Der Controller kann auch innerhalb einer Instanz registriert werden, jedoch nur in der Instanz, die ihn verwendet.

Angepasst aus dem obigen Fall: 

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

Wirkung:

3. Gemeinsame Filter

Konvertieren in das Zeitformat gemäß Zeitstempel: mm-tt 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>

Falleffekt:

Das Obige ist Ich habe es für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Informationen zum Einfügen variabler Parameter in vue.js-Tag-Attribute (ausführliches Tutorial)

Informationen zum Schließen eine Komponente durch Klicken außerhalb der Komponente in Vue (ausführliches Tutorial)

Details zur Lösung des Problems des weißen Bildschirms auf der Homepage nach dem Packen des Vue-Builds (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonWie verwende ich Filter in der Vue2.0-Serie?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So verwenden Sie Vue, um die Klasse von Dom zu bestimmenNächster Artikel：So verwenden Sie Vue, um die Klasse von Dom zu bestimmen

In Verbindung stehende Artikel

Mehr sehen