Objetivo de columna
Bajo el control de la pila de tecnología conjunta de vue y element UI, esta columna proporciona ejemplos de código fuente efectivos e introducciones de puntos de información para un uso flexible.
Proporcione algunas operaciones básicas de vue2: instalación, referencia, uso de plantilla, calculado, observación, ciclo de vida (antes de crear, creado, antes de montar, montado, antes de actualizar, actualizado, antes de destruir, destruido, activado, desactivado, errorCaptured, componentes), $root, $padre, $hijos, $slots, $refs, props, $emit, eventbus,proporcionar/inyectar, 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, filtros, v-bind, .stop, . nativo, directivas, mixin, render, internacionalización, Vue Router, etc.
Contenido de este artículo
Introducción al filtro
El filtro en Vue.js es una función personalizada para procesar texto, que se puede usar directamente en plantillas. Los filtros se pueden utilizar en dos lugares: 双花括号插值和 v-bind 表达式. 过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号（|）表示.
Los pasos de uso son los siguientes:
-
Definir filtros: defina una función en el atributo de filtros de la instancia o componente de Vue, que recibe un parámetro (el texto que debe filtrarse) y devuelve el texto filtrado.
-
Use filtros en plantillas: cuando necesite usar un filtro, agregue el nombre del filtro después de la expresión, separado por un carácter de barra vertical (|).
Representaciones de ejemplo
Código fuente de muestra
/*
* @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>
En este ejemplo, 我们定义了三个过滤器：capitalize、currency 和 formatDate. capitalize se usa para poner en mayúscula la primera letra del texto; moneda se usa para convertir números al formato RMB; formatDate se usa para formatear cadenas de fechas en formatos de fecha locales. Luego, en la plantilla, aplicamos estos filtros a los atributos de datos de mensaje, precio y fecha para implementar las funciones de procesamiento de texto correspondientes.