Objectif de la colonne
Sous le contrôle de la pile technologique conjointe de vue et d'élément UI, cette colonne fournit des exemples de code source efficaces et des introductions de points d'information pour une utilisation flexible.
Fournir quelques opérations de base de vue2 : installation, référence, utilisation du modèle, calculé, surveillance, cycle de vie (beforeCreate, créé, beforeMount, monté, beforeUpdate, mis à jour, beforeDestroy, détruit, activé, désactivé, errorCaptured, composants,), $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, slot-scope, filtres, v-bind, .stop, . natif, directives, mixin, rendu, internationalisation, Vue Router, etc.
Contenu de cet article
Présentation du filtre
Le filtre dans Vue.js est une fonction personnalisée de traitement de texte, qui peut être utilisée directement dans les modèles. Les filtres peuvent être utilisés à deux endroits : 双花括号插值和 v-bind 表达式. 过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号（|）表示.
Les étapes d'utilisation sont les suivantes :
-
Définir des filtres : définissez une fonction dans l'attribut filters de l'instance ou du composant Vue, qui reçoit un paramètre (le texte qui doit être filtré) et renvoie le texte filtré.
-
Utiliser des filtres dans les modèles : lorsque vous devez utiliser un filtre, ajoutez le nom du filtre après l'expression, séparé par un caractère barre verticale (|).
Exemples de rendus
Exemple de code source
/*
* @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>
Dans cet exemple, 我们定义了三个过滤器：capitalize、currency 和 formatDate. capitalize est utilisé pour mettre en majuscule la première lettre du texte ; monnaie est utilisé pour convertir les nombres au format RMB ; formatDate est utilisé pour formater les chaînes de date dans des formats de date locaux. Ensuite, dans le modèle, nous avons appliqué ces filtres aux attributs de données de message, de prix et de date pour implémenter les fonctions de traitement de texte correspondantes.