Heim > Artikel > Web-Frontend > So verwenden Sie den Filter in vue.js
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].
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('msgFormat', function(msg) { // 字符串的 replace 方法,第一个参数,除了可写一个 字符串之外,还可以定义一个正则 return msg.replace(/单纯/g, 'xx') }) </script>
2. Definieren Sie globale Filter mit Parametern
<div id="app"> <p>{{ msg | msgFormat('疯狂','--')}}</p> </div> <script> // 定义一个 Vue 全局的过滤器,名字叫做 msgFormat Vue.filter('msgFormat', 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 rechtsVerwandte 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!