Heim > Artikel > Web-Frontend > Wie verwende ich Filter in der Vue2.0-Serie?
Wie verwende ich Filter in der Vue2.0-Serie?
- 亚连Original
- 2018-06-02 10:11:512455Durchsuche
Dieser Artikel stellt hauptsächlich die Verwendung von Filtern in der Vue2.0-Serie vor. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.
vue2.0 verzichtet auf Filter und erfordert benutzerdefinierte Filter für einige gängige Textformatierungen.
Es fühlt sich super einfach an! !
Filter können an zwei Stellen verwendet werden: Interpolation mit doppelten Klammern und V-Bind-Ausdrücke.
Filter sollten am Ende von JavaScript-Ausdrücken hinzugefügt werden, was durch das Pipe-Zeichen gekennzeichnet ist.
1. Registrieren Sie einen globalen Filter
Hinweise:
1. Registrieren Sie einen benutzerdefinierten Filter mit der globalen Methode Vue.filter(). Filter, muss vor der Vue-Instanziierung platziert werden
2. Die Filterfunktion verwendet immer den Wert des Ausdrucks als ersten Parameter. Parameter mit Anführungszeichen werden als Zeichenfolgen behandelt, während Parameter ohne Anführungszeichen gemäß dem Ausdruck
3 berechnet werden . Es können zwei Filterparameter eingestellt werden, sofern die Verarbeitung der beiden Filter nicht kollidiert
4. Die vom Benutzer eingegebenen Daten können auch verarbeitet werden, bevor sie an das Modell übergeben werden
Fall
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤器</title>
</head>
<body>
<p id="app">
<!-- 首字符串大写 -->
<p>首字母大写过滤器：{{str | upcase}}</p>
<!-- 给过滤器传入参数 -->
<p>求和过滤器：{{message | sum(10,20)}}</p>
</p>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script type="text/javascript">
//全局方法 Vue.filter()注册一个自定义过滤器,必须放在Vue实例化前面
// 注册一个首字母大写的过滤器
Vue.filter("upcase", function(value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
});
// 全局注册一个求和过滤器
Vue.filter('sum', function (value, a, b) {
return value + a + b;
});
var demo = new Vue({
el: "#app",
data: {
str:'hello',
message:12
}
});
</script>
</body>
</html>Falleffekt:
2. Registrieren Sie sich innerhalb der Instanziierung
Filterung Der Controller kann auch innerhalb einer Instanz registriert werden, jedoch nur in der Instanz, die ihn verwendet.
Angepasst aus dem obigen Fall:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="app">
<!-- 首字符串大写 -->
<p>首字母大写过滤器：{{str | upcase}}</p>
<!-- 给过滤器传入参数 -->
<p>求和过滤器：{{message | sum(10,20)}}</p>
</p>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script type="text/javascript">
var demo = new Vue({
el: "#app",
data: {
str:'hello',
message:12
},
filters: {
upcase:function(value){
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
},
sum:function(value, a, b){
return value + a + b;
}
}
});
</script>
</body>
</html>Wirkung:
3. Gemeinsame Filter
Konvertieren in das Zeitformat gemäß Zeitstempel: mm-tt hh:tt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="app">
<!-- 将时间戳转化为时间 -->
<h1>根据时间戳转化为时间：{{ str | formateTime}}</h1>
</p>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script type="text/javascript">
var demo = new Vue({
el: "#app",
data: {
str:1517568434324,
},
filters: {
formateTime:function(nS){
return ((new Date(nS).getMonth()+1)<10?'0'+(new Date(nS).getMonth()+1):(new Date(nS).getMonth()+1)) + '-' + (new Date(nS).getDate()<10?'0'+new Date(nS).getDate():new Date(nS).getDate()) + ' ' + (new Date(nS).getHours()<10?'0'+new Date(nS).getHours():new Date(nS).getHours()) + ':' + (new Date(nS).getMinutes()<10?'0'+new Date(nS).getMinutes():new Date(nS).getMinutes())
}
}
});
</script>
</body>
</html>Falleffekt:
Das Obige ist Ich habe es für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.
Verwandte Artikel:
Informationen zum Einfügen variabler Parameter in vue.js-Tag-Attribute (ausführliches Tutorial)
Das obige ist der detaillierte Inhalt vonWie verwende ich Filter in der Vue2.0-Serie?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!