Heim  >  Artikel  >  Web-Frontend  >  So verwenden Sie den Filter in vue.js

So verwenden Sie den Filter in vue.js

coldplay.xixi
coldplay.xixiOriginal
2020-12-17 13:43:531854Durchsuche

So verwenden Sie Filter in vue.js: 1. Definieren Sie einen globalen Filter ohne Parameter, der Code lautet [Vue.filter('msgFormat', function(msg)]; 2. Definieren Sie einen globalen Filter mit Parametern, der Code lautet [Vue. filter('msgFormat', funct].

So verwenden Sie den Filter in vue.js

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6. Diese Methode ist für alle Computermarken geeignet.

[Empfohlene Verwandte Artikel: vue.js]

So verwenden Sie Filter in vue.js:

Filter in vue sind in zwei Typen unterteilt: lokale Filter und globale Filter

1. Definieren Sie einen globalen Filter ohne Parameter

       Vue.filter('msgFormat', function(msg) {    // msg 为固定的参数 即是你需要过滤的数据
            return msg.replace(/单纯/g, 'xxx')
       })

Vollständiges Beispiel

    <div id="app">
            <p>{{ msg | msgFormat}}</p>
        </div>
        <script>
            // 定义一个 Vue 全局的过滤器,名字叫做  msgFormat
            Vue.filter(&#39;msgFormat&#39;, function(msg) {
                // 字符串的  replace 方法,第一个参数,除了可写一个 字符串之外,还可以定义一个正则
                return msg.replace(/单纯/g, &#39;xx&#39;)
            })
        </script>

2. Definieren Sie globale Filter mit Parametern

       <div id="app">
            <p>{{ msg | msgFormat(&#39;疯狂&#39;,&#39;--&#39;)}}</p>
        </div>
        <script>
            // 定义一个 Vue 全局的过滤器,名字叫做  msgFormat
            Vue.filter(&#39;msgFormat&#39;, function(msg, arg, arg2) {
                // 字符串的  replace 方法,第一个参数,除了可写一个 字符串之外,还可以定义一个正则
                return msg.replace(/单纯/g, arg+arg2)
            })
      </script>

3. Die Definition und Verwendung lokaler Filter mit und ohne Parameter sind die gleichen wie bei globalen Filtern ist, dass der Filter in der Vue-Instanz definiert ist. Der Bereich, auf den er wirkt, ist auch der Bereich, der von der Vue-Instanz gesteuert wird Gleicher Name, lokal und global, sie werden nach dem Proximity-Prinzip aufgerufen, das heißt, lokale Filter werden vor globalen Filtern aufgerufen

2. Die Ausführungsreihenfolge der Filter muss voneinander getrennt werden Sonstiges. Von links nach rechts

Verwandte Lernempfehlungen: js-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Filter in vue.js. 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