Zusammenfassung der Filternutzung in Vue
Dieses Mal werde ich Ihnen eine Zusammenfassung der Verwendung von Filtern in Vue geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Filtern in Vue?
1. Angepasster Filter, dazu gehört natürlich die globale Registrierung und die Registrierung innerhalb der Instanziierung
(1) die Registrierung des globalen Filters
(1) Die globale Methode Vue.filter() registriert einen benutzerdefinierten Filter, der vor der Vue-Instanziierung platziert werden muss
(2) Die Filterfunktion endet immer mit Der Wert des Ausdrucks als erstes Argument. Parameter mit Anführungszeichen werden als Zeichenfolgen behandelt, während Parameter ohne Anführungszeichen als Ausdrücke berechnet werden
(3) Es können zwei Filterparameter festgelegt werden, vorausgesetzt, dass diese beiden Filter verarbeiten. Es besteht kein Konflikt
(4) Die vom Benutzer eingegebenen Daten können auch verarbeitet werden, bevor sie an das Modell zurückgegeben werden
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue自定义过滤器</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<p class="test">
<p>{{message | sum}}</p>
<p>{{message | cal 10 20}}</p> <!--过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算。-->
<p>{{message | sum | currency }}</p> <!--添加两个过滤器,注意不要冲突-->
<input type="text" v-model="message | change"> <!--用户从input输入的数据在回传到model之前也可以先处理-->
</p>
<script type="text/javascript">
// -----------------------------------------华丽分割线(从model->view)---------------------------------------
Vue.filter("sum", function(value) { //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
return value + 4;
});
Vue.filter('cal', 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>
</body>
</html>Der Filter übergibt standardmäßig das aktuelle Element und den ersten Filter Jeder Parameter Standardmäßig wird das aktuelle Element verwendet.
(2) Innerhalb der Instanziierung registriert
Das obige Beispiel wird direkt im Vue-Global registriert, und andere Instanzen, die diesen Filter nicht verwenden, werden ebenfalls dazu gezwungen Akzeptieren Sie es. Tatsächlich kann der Filter innerhalb der Instanz registriert werden und wird nur in der Instanz registriert, die ihn verwendet.
Das obige Programm wird wie folgt umgeschrieben:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue自定义过滤器</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<p class="test">
<p>{{message | sum}}</p>
<p>{{message | cal 10 20}}</p> <!--过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算。-->
<p>{{message | sum | currency }}</p> <!--添加两个过滤器,注意不要冲突-->
<input type="text" v-model="message | change"> <!--用户从input输入的数据在回传到model之前也可以先处理-->
</p>
<script type="text/javascript">
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>
</body>
</html>2 Verwenden Sie die Iterationsfunktion Filter in js
(1) Beispiel 1 Originaltext
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
});;
}
}
})
<ul>
Filter Key<input type="text" v-model="key">
<li v-for="item in filterShoppingList">
{{ item }}
</li>
</ul>Der endgültige Effekt realisiert die Funktion des Filterns der Liste basierend auf Schlüsselwörtern.
Einige andere Js-Iterationsmethoden - filter(), map(), some(), every(), forEach(), lastIndexOf(), indexOf()
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Das obige ist der detaillierte Inhalt vonZusammenfassung der Filternutzung in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1393
52
1209
24
Analysieren Sie die Verwendung und Klassifizierung von JSP-Kommentaren
Feb 01, 2024 am 08:01 AM
Klassifizierung und Verwendungsanalyse von JSP-Kommentaren JSP-Kommentare werden in zwei Typen unterteilt: einzeilige Kommentare: Mit der Endung kann nur eine einzelne Codezeile kommentiert werden. Mehrzeilige Kommentare: Beginnend mit /* und endend mit */ können Sie mehrere Codezeilen kommentieren. Beispiel für einen einzeiligen Kommentar Beispiel für einen mehrzeiligen Kommentar/**Dies ist ein mehrzeiliger Kommentar*Kann mehrere Codezeilen kommentieren*/Verwendung von JSP-Kommentaren JSP-Kommentare können zum Kommentieren von JSP-Code verwendet werden, um ihn leichter lesbar zu machen
Fassen Sie die Verwendung der Funktion system() im Linux-System zusammen
Feb 23, 2024 pm 06:45 PM
Zusammenfassung der Funktion system() unter Linux Im Linux-System ist die Funktion system() eine sehr häufig verwendete Funktion, mit der Befehlszeilenbefehle ausgeführt werden können. In diesem Artikel wird die Funktion system() ausführlich vorgestellt und einige spezifische Codebeispiele bereitgestellt. 1. Grundlegende Verwendung der Funktion system() Die Deklaration der Funktion system() lautet wie folgt: intsystem(constchar*command);
So verwenden Sie die Exit-Funktion in der C-Sprache richtig
Feb 18, 2024 pm 03:40 PM
Für die Verwendung der Exit-Funktion in der C-Sprache sind bestimmte Codebeispiele erforderlich. In der C-Sprache müssen wir häufig die Ausführung des Programms zu Beginn des Programms beenden oder das Programm unter bestimmten Bedingungen beenden. Die C-Sprache stellt die Funktion „exit()“ zur Implementierung dieser Funktion bereit. In diesem Artikel wird die Verwendung der Funktion „exit()“ vorgestellt und entsprechende Codebeispiele bereitgestellt. Die Funktion „exit()“ ist eine Standardbibliotheksfunktion in der Sprache C und in der Header-Datei enthalten. Seine Funktion besteht darin, die Ausführung des Programms zu beenden und kann eine Ganzzahl annehmen
Verwendung der WPSdatedif-Funktion
Feb 20, 2024 pm 10:27 PM
WPS ist eine häufig verwendete Office-Software-Suite und die WPS-Tabellenfunktion wird häufig für die Datenverarbeitung und Berechnungen verwendet. In der WPS-Tabelle gibt es eine sehr nützliche Funktion, die DATEDIF-Funktion, die zur Berechnung der Zeitdifferenz zwischen zwei Datumsangaben verwendet wird. Die DATEDIF-Funktion ist die Abkürzung des englischen Wortes DateDifference. Ihre Syntax lautet wie folgt: DATEDIF(start_date,end_date,unit) wobei start_date das Startdatum darstellt.
Einführung in Python-Funktionen: Verwendung und Beispiele der abs-Funktion
Nov 03, 2023 pm 12:05 PM
Einführung in Python-Funktionen: Verwendung und Beispiele der abs-Funktion 1. Einführung in die Verwendung der abs-Funktion In Python ist die abs-Funktion eine integrierte Funktion, die zur Berechnung des Absolutwerts eines bestimmten Werts verwendet wird. Es kann ein numerisches Argument akzeptieren und den absoluten Wert dieser Zahl zurückgeben. Die grundlegende Syntax der abs-Funktion lautet wie folgt: abs(x) wobei x der numerische Parameter zur Berechnung des Absolutwerts ist, der eine Ganzzahl oder eine Gleitkommazahl sein kann. 2. Beispiele für die abs-Funktion Im Folgenden zeigen wir die Verwendung der abs-Funktion anhand einiger spezifischer Beispiele: Beispiel 1: Berechnung
Einführung in Python-Funktionen: Verwendung und Beispiele der isinstance-Funktion
Nov 04, 2023 pm 03:15 PM
Einführung in Python-Funktionen: Verwendung und Beispiele der isinstance-Funktion Python ist eine leistungsstarke Programmiersprache, die viele integrierte Funktionen bereitstellt, um das Programmieren komfortabler und effizienter zu gestalten. Eine der sehr nützlichen integrierten Funktionen ist die Funktion isinstance(). In diesem Artikel werden die Verwendung und Beispiele der Funktion isinstance vorgestellt und spezifische Codebeispiele bereitgestellt. Mit der Funktion isinstance() wird ermittelt, ob ein Objekt eine Instanz einer bestimmten Klasse oder eines bestimmten Typs ist. Die Syntax dieser Funktion ist wie folgt
Ausführliche Erklärung und Einführung in die Verwendung der MySQL-ISNULL-Funktion
Mar 01, 2024 pm 05:24 PM
Die Funktion ISNULL() in MySQL ist eine Funktion, mit der ermittelt wird, ob ein angegebener Ausdruck oder eine angegebene Spalte NULL ist. Es gibt einen booleschen Wert zurück, 1, wenn der Ausdruck NULL ist, andernfalls 0. Die Funktion ISNULL() kann in der SELECT-Anweisung oder zur bedingten Beurteilung in der WHERE-Klausel verwendet werden. 1. Die grundlegende Syntax der Funktion ISNULL(): ISNULL(Ausdruck), wobei Ausdruck der Ausdruck ist, um zu bestimmen, ob er NULL ist oder
Verwendung des Schlüsselworts „distinct' beim Parsen von SQL
Feb 18, 2024 pm 09:21 PM
Ausführliche Erläuterung der eindeutigen Verwendung in SQL. In SQL-Datenbanken stoßen wir häufig auf Situationen, in denen wir doppelte Daten entfernen müssen. Zu diesem Zeitpunkt können wir das Schlüsselwort „distinct“ verwenden, das uns dabei helfen kann, doppelte Daten zu entfernen und die Abfrageergebnisse klarer und genauer zu machen. Die grundlegende Verwendung von „distinct“ ist sehr einfach. Verwenden Sie einfach das Schlüsselwort „distinct“ in der select-Anweisung. Das Folgende ist beispielsweise eine normale SELECT-Anweisung: SELECTcolumn_name
