Spaltenziel
Unter der Kontrolle des gemeinsamen Technologie-Stacks von Vue und Element UI bietet diese Kolumne effektive Quellcodebeispiele und Informationspunkteinführungen für eine flexible Verwendung.
Stellen Sie einige grundlegende Vorgänge von vue2 bereit: Installation, Referenz, Vorlagenverwendung, berechnet, Überwachung, Lebenszyklus (beforeCreate, erstellt, beforeMount, gemountet, beforeUpdate, aktualisiert, beforeDestroy, zerstört, aktiviert, deaktiviert, errorCaptured, Komponenten,), $root, $parent, $children, $slots, $refs, props, $emit, eventbus,provide/inject, Vue.observable, $listeners, $attrs, $nextTick, v-for, v-if, v-else,v- else-if, v-on, v-pre, v-cloak, v-once, v-model, v-html, v-text, keep-alive, slots-scope, filter, v-bind, .stop, . native, Direktiven, Mixin, Render, Internationalisierung, Vue Router usw.
Inhalt dieses Artikels
Filtereinführung
Filter in Vue.js ist eine benutzerdefinierte Funktion zur Textverarbeitung, die direkt in Vorlagen verwendet werden kann. Filter können an zwei Stellen verwendet werden: 双花括号插值和 v-bind 表达式. 过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号（|）表示.
Die Verwendungsschritte sind wie folgt:
-
Filter definieren: Definieren Sie eine Funktion im Filterattribut der Vue-Instanz oder -Komponente, die einen Parameter (den Text, der gefiltert werden muss) empfängt und den gefilterten Text zurückgibt.
-
Verwenden Sie Filter in Vorlagen: Wenn Sie einen Filter verwenden müssen, fügen Sie den Namen des Filters nach dem Ausdruck hinzu, getrennt durch ein Pipe-Zeichen (|).
Beispiel-Renderings
Beispielquellcode
/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: [email protected]
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2024-02-06
*/
<template>
<div class="djs-box">
<div class="topBox">
<h3>vue中filters的使用方法（图文示例）</h3>
<div>大剑师兰特, 还是大剑师兰特，gis-dajianshi</div>
</div>
<div class="dajianshi">
<p>变化前：{
{
message}} ， filter变化后：{
{
message | capitalize }}</p>
<p>变化前：{
{
price }} ，filter变化后：{
{
price | currency }}</p>
<p>变化前：{
{
date }} ，filter变化后：{
{
date | formatDate }}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return{
message: 'hello world',
price: 1234.56,
date: '2022-01-01'
}
},
filters: {
capitalize: function(value) {
if (!value) return '';
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
},
currency: function(value) {
if (!value) return '';
return '￥' + value.toFixed(2);
},
formatDate: function(value) {
if (!value) return '';
return new Date(value).toLocaleDateString();
}
}
}
</script>
<style scoped>
.djs-box {
width: 1000px;
height: 650px;
margin: 50px auto;
border: 1px solid teal;
}
.topBox {
margin: 0 auto 0px;
padding: 10px 0 20px;
background: teal;
color: #fff;
}
.dajianshi {
width: 98%;
height: 420px;
margin: 5px auto 0;
border:1px solid #369;
padding-top: 100px;
}
p{
font-size: 30px;}
</style>
In diesem Beispiel 我们定义了三个过滤器：capitalize、currency 和 formatDate. Mit „capitalize“ wird der erste Buchstabe des Textes groß geschrieben; „currency“ wird zum Konvertieren von Zahlen in das RMB-Format verwendet; „formatDate“ wird zum Formatieren von Datumszeichenfolgen in lokale Datumsformate verwendet. Anschließend haben wir in der Vorlage diese Filter auf die Datenattribute Nachricht, Preis und Datum angewendet, um die entsprechenden Textverarbeitungsfunktionen zu implementieren.