Artikelverzeichnis
1. Konzept
Mit Vue.js können wir Filter anpassen, die für einige gängige Textformatierungen verwendet werden können. Filter können an zwei Stellen verwendet werden: Interpolation und v-bindAusdruck in doppelten Klammern (letzteres wird ab 2.1.0+ unterstützt). Der Filter sollte am Ende des JavaScript-Ausdrucks hinzugefügt werden, der durch das |Symbol "Pipe" dargestellt wird:
<!-- 在双花括号中 -->
{
{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
Zwei, benutze
Die Filterfunktion erhält immer den Wert des Ausdrucks (das Ergebnis der vorherigen Operationskette) als ersten Parameter.
1. Definieren Sie einen globalen Filter
//这个过滤器用于将首字母大写
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
el: "#app",
data: {
message: "hello"
}
})
<div id="app">
<!--Hello-->
<h2>{
{message | capitalize}}</h2>
</div>
2. Definieren Sie einen lokalen Filter in der Komponente
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
Wenn der globale Filter und der lokale Filter denselben Namen haben, wird der lokale Filter verwendet.
3. Der Filter kann in Reihe geschaltet werden
{
{
message | filterA | filterB }}
In diesem Beispiel wird es filterAals Filterfunktion definiert, die einen einzelnen Parameter empfängt, und der Wert der Ausdrucksnachricht wird als Parameter an die Funktion übergeben. Dann weiter, der gleiche Aufruf wird als einzelnes Argument und die Filterfunktion definiert filterB, und filterAdas Ergebnis wird an filterBdie übertragen.
new Vue({
el: "#app",
data: {
message: "hello"
},
filters: {
addMessage(value) {
return value + ' webchang';
},
addMessage2(value) {
return value + ' world!';
}
}
})
<!-- hello webchang world! -->
<h2>{
{message | addMessage | addMessage2}}</h2>
4. Der Filter kann Parameter empfangen
Der Filter ist eine JavaScript-Funktion, sodass er Parameter empfangen kann
{
{
message | filterA('arg1', arg2) }}
filterAEs ist als Filterfunktion definiert, die drei Parameter empfängt. Wobei der Nachrichtenwert als erster Parameter, die einfache Zeichenfolge 'arg1'als zweites Argument, der Ausdruckswert arg2als dritter Parameter.
new Vue({
el: "#app",
data: {
message: "hello"
},
filters: {
addMessage3(value, arg1, arg2) {
return value + arg1 + arg2;
}
}
})
<!-- hello111 你好啊 -->
<h2>{
{message | addMessage3(111,' 你好啊')}}</h2>