Tabla de contenido
1. Combinación de conocimientos
2. Caso de gestión de marca de automóvil (formato de tiempo)
2. Modificadores de teclado Vue
1. Filtro Vue:
1. Combinación de conocimientos
Vue permite a los desarrolladores personalizar los filtros, que generalmente se usan para algunos formatos de texto comunes.
Por ejemplo, el formato de texto de la fecha en el caso [Administración de marca de automóvil]. Como se muestra abajo:
Después de obtener la fecha de los datos, el efecto que mostramos directamente puede no ser el que necesitamos, por lo que antes de mostrar, debemos personalizar un proceso, y el resultado después del procesamiento se usa para mostrar, por lo que se llama "filtrado " .
El caso específico ha realizado las tres funciones de agregar, borrar y verificar, y la implementación de cada paso está escrita en detalle en el blog.
Puede consultar los siguientes enlaces para aprender:
Los filtros se pueden usar en dos lugares: expresiones de interpolación o expresiones v-bind, los filtros deben agregarse al final de las expresiones de JavaScript , indicado por el carácter "pipeline" , entendido como sintaxis : { {xxx | filter } } o <p: v-bind="título| filtro "></p>
Hay dos tipos de filtros , vue permite la definición de filtros privados y filtros globales.
- Filtro privado: el filtro privado solo se puede usar en el área controlada por la instancia de vue enlazada
- Filtro global: compartido por todas las instancias de VM
A continuación, aprenda con el caso ~~~~~~
2. Caso de gestión de marca de automóvil (formato de tiempo)
-
filtro privado:
principal.js
índice.html
-
Filtro global:
Use el filtro, después de la marca china + inglés:
2. Modificadores de teclado Vue
En las páginas web, a veces existe la necesidad de monitorear el evento de respuesta de tecla arriba del teclado, por ejemplo: en el ejemplo anterior, después de que el usuario ingresa la identificación y el nombre, no se agrega una marca a través del botón Agregar, pero la entrada del nombre se presiona la casilla Presione la tecla enter para completar la adición
Agregar usando enter para agregar automáticamente
En el sitio web oficial de Vue.js : https://cn.vuejs.org/v2/guide/events.html#key modificadores , hay instrucciones para los modificadores de teclas
keyup.keyboard operation = "función realizada"
Aquí todavía usamos la gestión de marcas de automóviles para completar
<label>Name:
<!-- keyup监听键盘抬起事件:enter表示监听enter键抬起 -->
<input type="text" class="form-control" v-model="name" @keyup.enter="add()">
</label>
*: Vue establece un alias para las teclas comunes del teclado . En el evento keyup , no es necesario recordar el código de esta tecla , solo use el alias directamente
.ingresar . pestaña.eliminar .esc .espacio.arriba abajo izquierda derecha
- <!-- 113 corresponde al teclado F2 -->
<input type="text" class="form-control" v-model="name" @keyup.113 ="add()">
- // Modificadores de teclado personalizados
Vue.config.keyCodes.f2=113//<!-- 113 corresponde al teclado F2 --><input type="text" class="form-control" v-model="name" @keyup.f2 ="add()">
*: Tenga en cuenta que algunas teclas pueden ser respondidas por el sistema, como las teclas F1 y Tab del navegador , luego cuando se definen estas teclas, se capturará el evento, es decir, el sistema responderá primero, incluso si es incorporado por vue Lo mismo es cierto para las teclas, por lo que cuando hay teclas de teclado personalizadas, debe tener una evaluación para la selección de teclas.Tabla de comparación de códigos de teclas del teclado : puede usar Baidu