1. Introducción al filtro

1.1 Filtro global y filtro local

Un filtro es esencialmente una función, similar a una directiva personalizada .

filtro global

Vue.filter(id, [definition])

filtro local

new Vue({
  el: '#app',
  filters: {
      definition(value): {
          ...
          }
      }
  })

Caso: un filtro global que convierte la primera letra de una cadena en mayúsculas

Vue.filter('capitalize', function (value) {
        if (!value) return '';
        value = value.toString();
        return value.charAt(0).toUpperCase() + value.slice(1);
    })

Si se reemplaza por un filtro local

let vm = new Vue({
    el: '#app',
    data: { // 参数定义，字典形式
    },
    computed: { // 计算属性，多次调用，只计算一次
    },
    methods: { // 普通方法，多次调用，多次计算
    },
    filters: { // 过滤器
        capitalize(value) {
            if (!value) return '';
            value = value.toString();
            return value.charAt(0).toUpperCase() + value.slice(1);
        }
    }
})

Aviso:

Cuando el filtro global y el filtro local tienen el mismo nombre, se utilizará el filtro local

Al igual que los comandos personalizados, los filtros globales se pueden usar en la plantilla de cualquier instancia de Vue, mientras que los filtros locales solo se pueden usar en la vista vinculada a esa instancia.

Los filtros se pueden utilizar en dos lugares:

Llaves dobles: { { variable | filtro }}
expresión v-bind: v-bind:href="variable | filter"

2. Parámetros de filtro

Una función de filtro siempre recibe el valor de una expresión como primer parámetro. Un filtro es esencialmente una función JS y naturalmente puede recibir múltiples parámetros.

No se recomienda hacer que la función del filtro sea muy complicada, lo que viola la intención de diseño original del filtro, por ejemplo: Vue.filter('formato', función (valor, ...parámetros) {...})

Ejemplo: un filtro que agrega prefijos y sufijos al valor de una expresión

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
 
<body>
<div id="app">
    <h2>过滤器</h2>
    <!-- 输出：vue-filters.js -->
    <p>{
   
   { filename | format('vue', suffix) }}</p>
</div>
 
<script src="VueJs/vue.js"></script>
<script>
    Vue.filter('format', function (value, prefix, suffix) {
        if (!value) return '';
        value = value.toString();
        return prefix + "-" + value + "." + suffix;
    })
    let vm = new Vue({
        el: '#app',
        data: {
            filename: 'filters',
            suffix: 'js'
        },
        computed: { // 计算属性，多次调用，只计算一次
        },
        methods: { // 普通方法，多次调用，多次计算
        },
        filters: { // 过滤器
        }
    })
</script>
</body>
</html>

3. La conexión en serie de filtros.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .profile {}
    </style>
</head>
 
<body>
<div id="app">
    <h2>过滤器</h2>
    <!--  输出结果：DLROW OLLEH  -->
    <p>{
   
   { message | uppercase | reverse }}</p>
</div>
 
<script src="VueJs/vue.js"></script>
<script>
    Vue.filter('uppercase', function (value) {
        if (!value) return '';
        value = value.toString();
        return value.toUpperCase();
    })
 
    Vue.filter('reverse', function (value) {
        if (!value) return '';
        value = value.toString();
        return value.split('').reverse().join('');
    })
 
    let vm = new Vue({
        el: '#app',
        data: {
            message: 'hello world'
        },
        computed: { // 计算属性，多次调用，只计算一次
        },
        methods: { // 普通方法，多次调用，多次计算
        },
        filters: { // 局部过滤器
        }
    })
</script>
</body>
</html>

Filtros para Vue3

1. Introducción al filtro

1.1 Filtro global y filtro local

Supongo que te gusta