1. ¿Qué es el filtro de vue?
Vue.js le permite personalizar filtros, que se pueden usar para algunos formatos de texto comunes . Los filtros se pueden usar en dos lugares: interpolación de llaves dobles y expresiones de unión v (esta última es compatible con 2.1.0+). El filtro debe agregarse al final de la expresión de JavaScript, indicado por el símbolo de "tubería":
<!-- 在双花括号中 -->
{
{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
2. Hay dos tipos de filtros en vue: filtros locales y filtros globales
1. Filtro local, también llamado filtro local
Puede definir filtros locales en las opciones de un componente :
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
Ejemplo:
test2.vue:
<template>
<div>
<h1>
{
{
"test1" | filterTest }}
</h1>
<h2>
{
{
"test2" | filterTest2 }}
</h2>
</div>
</template>
<script>
export default {
filters: {
filterTest2: function (value) {
if (!value) return "";
return value + "局部过滤器";
},
},
};
</script>
<style lang="scss" scoped>
</style>
efecto:
2. Filtro global
O defina el filtro globalmente antes de crear la instancia de Vue , en main.js:
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
// ...
})
Ejemplo:
main.js:
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
Vue.filter('filterTest', function (value) {
if (!value) return '';
return value + '全局过滤器'
})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: {
App
},
template: '<App/>'
})
test1.vue:
<template>
<div>{
{
'test1' | filterTest }}</div>
</template>
<script>
export default {
};
</script>
<style lang="scss" scoped>
</style>
efecto:
3. Atención
Cuando el filtro global y el filtro local tienen el mismo nombre, se utilizará el filtro local.
3. Uso avanzado de la función de filtro
La función de filtro siempre recibe el valor de la expresión (el resultado de la cadena de operaciones anterior) como primer parámetro . En el ejemplo anterior, la función de filtro de mayúsculas recibirá el valor del mensaje como primer parámetro.
1. El filtro es una función de JavaScript, por lo que puede recibir parámetros
{
{ message | filterA('arg1', arg2) }}
Aquí, filterA se define como una función de filtro que recibe tres parámetros. El valor del mensaje se usa como primer parámetro, la cadena ordinaria 'arg1' se usa como segundo parámetro y el valor de la expresión arg2 se usa como tercer parámetro.
Ejemplo:
test.vue:
<template>
<div>
<h1>
{
{
"test1" | filterTest }}
</h1>
<h2>
{
{
"test2" | filterTest2 }}
</h2>
<h2>测试过滤器的串联使用</h2>
<h2>
{
{
"串联局部和全局过滤器：" | filterTest | filterTest2 }}
</h2>
<h2>通过接受参数，实现可配的过滤器</h2>
<h3>商品价格为：{
{
7 | filterMulti }}</h3>
<h3>商品价格为：{
{
98 | filterMulti("￥") }}</h3>
</div>
</template>
<script>
export default {
filters: {
filterTest2: function (value) {
if (!value) return "";
return value + "局部过滤器";
},
filterMulti: function (value, symbol = "$") {
// 给symbol一个默认值，如果没有传参那就用 “$”
if (!value) return "";
return symbol + value;
},
},
};
</script>
<style lang="scss" scoped>
</style>
efecto:
2. El uso de filtros en serie
Los filtros se pueden conectar en serie:
{
{ message | filterA | filterB }}
En este ejemplo, filterA se define como una función de filtro que recibe un solo parámetro, y el valor del mensaje de expresión se pasará a la función como parámetro. Luego continúe llamando a la función de filtro filterB, que también está definida para recibir un solo parámetro, y pase el resultado de filterA a filterB.
Es decir, el mensaje se pasa al filtro A, y el resultado devuelto en el filtro A se pasa al filtro B como datos después del proceso de filtrado, y los datos obtenidos por el filtro B se filtran y finalmente se devuelven a la página para mostrar.
Ejemplo:
test1.vue:
<template>
<div>
<h1>
{
{
"test1" | filterTest }}
</h1>
<h2>
{
{
"test2" | filterTest2 }}
</h2>
<h2>测试过滤器的串联使用</h2>
<h2>
{
{
"串联局部和全局过滤器：" | filterTest | filterTest2 }}
</h2>
</div>
</template>
<script>
export default {
filters: {
filterTest2: function (value) {
if (!value) return "";
return value + "局部过滤器";
},
},
};
</script>
<style lang="scss" scoped>
</style>
efecto:
