Fundamentos de Vue - Filtros

Propósito: Para convertir el formato, el filtro es una función , el valor entrante devuelve el valor procesado (llamado por el símbolo de tubería)

Filtrar escena en Vue

        Los filtros solo se pueden usar en <expresiones de interpolación y expresiones v-bind>

Ejemplo: definición global

Vue.filter("nombre del filtro", (valor) => {return "devuelve el valor procesado"} las
letras están en mayúscula, ingrese "hola", emita "HOLA"

Vue.filter('filterA',(val) =>val.toUpperCase())
Vue.config.productionTip =false

<template>
  <div>
    <h5>原始数据:{
   
   { message }}</h5>
    <h5>使用全局过滤器实现数据大写:{
   
   {message | filterA}}</h5>
  </div>
</template>

<script>
export default {
  data(){
    return{
      message:'hello'
    }
  }
};
</script>

definición local

filtros: {nombre del filtro: (valor) => {return "devolver el valor procesado"} el
primer carácter está en minúsculas, "input HELLO", salida "hELLO"

gramática:

• Paso de parámetros de filtro: variable vue | filtro (parámetro real)

• Múltiples filtros: variable vue | filtro1 | filtro2

<template>
  <div>
    <h5>原始数据:{
   
   { message }}</h5>
    <a href="#" :title="message | filterB">使用局部过滤器实现数据大写</a>
      //可以传多个过滤器
    <h5>多个过滤器使用:{
   
   {message | filterA |filterC}}</h5>
    <p>原来的样子: {
   
   { msg }}</p>
    <!-- 1.
      给过滤器传值
      语法: vue变量 | 过滤器名(值)
     -->
    <p>使用翻转过滤器: {
   
   { msg | reverse('|') }}</p>
    <!-- 2.
      多个过滤利使用
      语法: vue变量 | 过滤器1 | 过滤器2
     -->
    <p :title="msg | toUp | reverse('|')">鼠标长停</p>
  </div>
</template>

<script>
export default {
  filters: {
    filterB(val){
      return val.toUpperCase()
    },
    filterC(val){
      return val.charAt(0).toLowerCase() + val.slice(1)
      //字符串拼接方法 将第一个首字母改为小写 后面是大写
    }
  },
  data(){
    return{
      message:'hello'
    }
  }
};
</script>

Resumen: los filtros pueden pasar parámetros, y un filtro se puede usar más adelante para obtener un resultado de filtro

 filtrar notas

1. Para ser definido en el nodo de filtro, es esencialmente una función
2. En la función de filtro, debe haber un valor de retorno
3. En el parámetro formal del filtro, puede obtener el valor a procesar antes del símbolo de tubería.
4. Si los nombres del filtro global y el filtro privado son los mismos, el filtro privado se llama de acuerdo con el "principio de proximidad".