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>Nach dem Login kopieren
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>Nach dem Login kopieren
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>Nach dem Login kopieren
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:
Detaillierte Erläuterung der Methode zur Verarbeitung eines Vue-Projekts, das im Nicht-Website-Stammverzeichnis kompiliert und bereitgestellt wird
Vue implementiert mobiles Terminal. Detaillierte Erläuterung der Schritte für das öffentliche WeChat-Konto
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!
