1. Was ist der Filter von Vue?
Mit Vue.js können Sie Filter anpassen, die für einige gängige Textformatierungen verwendet werden können . Filter können an zwei Stellen verwendet werden: doppelte geschweifte Klammerinterpolation und V-Bind-Ausdrücke (letzterer wird ab 2.1.0+ unterstützt). Der Filter sollte am Ende des JavaScript-Ausdrucks hinzugefügt werden, angezeigt durch das "Pipe" -Symbol:
<!-- 在双花括号中 -->
{
{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
2. Es gibt zwei Arten von Filtern in vue: lokale Filter und globale Filter
1. Lokaler Filter, auch lokaler Filter genannt
Sie können lokale Filter in den Optionen einer Komponente definieren :
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
Beispiel:
test2.vue:
<template>
<div>
<h1>
{
{
"test1" | filterTest }}
</h1>
<h2>
{
{
"test2" | filterTest2 }}
</h2>
</div>
</template>
<script>
export default {
filters: {
filterTest2: function (value) {
if (!value) return "";
return value + "局部过滤器";
},
},
};
</script>
<style lang="scss" scoped>
</style>
bewirken:
2. Globaler Filter
Oder definieren Sie den Filter global, bevor Sie die Vue-Instanz in main.js erstellen:
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
// ...
})
Beispiel:
main.js:
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
Vue.filter('filterTest', function (value) {
if (!value) return '';
return value + '全局过滤器'
})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: {
App
},
template: '<App/>'
})
test1.vue:
<template>
<div>{
{
'test1' | filterTest }}</div>
</template>
<script>
export default {
};
</script>
<style lang="scss" scoped>
</style>
bewirken:
3. Achtung
Wenn der globale Filter und der lokale Filter denselben Namen haben, wird der lokale Filter verwendet.
3. Erweiterte Verwendung der Filterfunktion
Die Filterfunktion erhält immer den Wert des Ausdrucks (das Ergebnis der vorherigen Operationskette) als ersten Parameter . Im obigen Beispiel erhält die Groß- und Kleinschreibung des Filterwerts den Wert der Nachricht als ersten Parameter.
1. Der Filter ist eine JavaScript-Funktion, sodass er Parameter empfangen kann
{
{ message | filterA('arg1', arg2) }}
Hier ist filterA als Filterfunktion definiert, die drei Parameter empfängt. Der Wert der Nachricht wird als erster Parameter verwendet, der gewöhnliche String 'arg1' wird als zweiter Parameter verwendet und der Wert des Ausdrucks arg2 wird als dritter Parameter verwendet.
Beispiel:
test.vue:
<template>
<div>
<h1>
{
{
"test1" | filterTest }}
</h1>
<h2>
{
{
"test2" | filterTest2 }}
</h2>
<h2>测试过滤器的串联使用</h2>
<h2>
{
{
"串联局部和全局过滤器：" | filterTest | filterTest2 }}
</h2>
<h2>通过接受参数，实现可配的过滤器</h2>
<h3>商品价格为：{
{
7 | filterMulti }}</h3>
<h3>商品价格为：{
{
98 | filterMulti("￥") }}</h3>
</div>
</template>
<script>
export default {
filters: {
filterTest2: function (value) {
if (!value) return "";
return value + "局部过滤器";
},
filterMulti: function (value, symbol = "$") {
// 给symbol一个默认值，如果没有传参那就用 “$”
if (!value) return "";
return symbol + value;
},
},
};
</script>
<style lang="scss" scoped>
</style>
bewirken:
2. Die Verwendung von Filtern in Reihe
Filter können in Reihe geschaltet werden:
{
{ message | filterA | filterB }}
In diesem Beispiel wird filterA als Filterfunktion definiert, die einen einzelnen Parameter empfängt, und der Wert der Ausdrucksnachricht wird als Parameter an die Funktion übergeben. Rufen Sie dann weiterhin die Filterfunktion filterB auf, die auch so definiert ist, dass sie einen einzelnen Parameter empfängt, und übergeben Sie das Ergebnis von filterA an filterB.
Das heißt, die Nachricht wird an den Filter A übergeben, und das im Filter A zurückgegebene Ergebnis wird nach dem Filtervorgang als Daten an den Filter B übergeben, und die vom Filter B erhaltenen Daten werden gefiltert und schließlich an die Seite für zurückgegeben Anzeige.
Beispiel:
test1.vue:
<template>
<div>
<h1>
{
{
"test1" | filterTest }}
</h1>
<h2>
{
{
"test2" | filterTest2 }}
</h2>
<h2>测试过滤器的串联使用</h2>
<h2>
{
{
"串联局部和全局过滤器：" | filterTest | filterTest2 }}
</h2>
</div>
</template>
<script>
export default {
filters: {
filterTest2: function (value) {
if (!value) return "";
return value + "局部过滤器";
},
},
};
</script>
<style lang="scss" scoped>
</style>
bewirken:
