El uso de filtros en Vue
Pensemos en por qué hay un filtro cuando hay métodos, porque la eficiencia de implementación del filtro es mucho mayor que la de los métodos.
Eche un vistazo a la definición oficial:
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 doble llave y expresiones de enlace v (esta última se admite a partir de 2.1.0+). Los filtros deben agregarse al final de la expresión de JavaScript, indicada por el símbolo de "tubería":
1. Filtro local (el más utilizado)
gramática
- plantilla
<div>{
{ name | judgeRole }}</div>
//或者
<div v-bind:id="rawId | formatId"></div>
Después de una operación, el filtro anterior se convertirá en: _s(_f("mayúsculas") (mensaje)).
_f: Esta función es en realidad un alias de resolveFilter. Su función es encontrar el filtro de _this.$options.filter y devolverlo.
_s: Esta función es un alias de la función toString. Su función es obtener el resultado filtrado y páselo a la función toString(), el resultado se guardará en el atributo de texto en el VNode y el resultado se devolverá para representar la vista directamente.
El principio de la función _f
La función _f en realidad busca el filtro. Si se encuentra el filtro, lo devuelve. Si no se encuentra, devuelve el mismo valor que el parámetro. Su código es realmente muy simple:
import {identity, resolveAssets} from 'core/util/index'
export function resolveFilter(id){
return resolveAssets(this.$options, 'filters', id, true) || identity
}
Centrémonos en lo que hace resolveAssets.
export function resolveAsset (options, type, id, warnMissing){
if(typeof(id) !== 'string'){
return
}
const assets = options[type]
if(hasOwn(assets, id)) return assets[id]
const camelizedId = camelize(id)
if(hasOwn(assets, camelizedId)) return assets[camelizedId]
const PascalCaseId = capitlize(camelizedId)
if(hasOwn(assets, PascalCaseId)) return assets[PascalCaseId]
//检查原型链
const res assets[id] || assets[camelizedId] || PascalCaseId
if(process.env.NODE_ENV!=='production'&& warnMissing&&!res){
warn('Fail to resolve' + type.slice(0,-1)+':'+id, options)
}
return res
}
De hecho, su proceso de búsqueda también es muy sencillo, realizando principalmente las siguientes operaciones (id es el id del filtro):
1. Determine si el ID del filtro es una cadena; si no, finalice.
2. Utilice activos para almacenar el filtro. 3.
La función hasOwn comprueba si los activos en sí tienen un atributo de ID. Si lo tiene, devuelve.
4. El La función hasOwn comprueba si los activos tienen un ID de caso de camello. El atributo, si existe, devuelve
5. La función hasOwn comprueba si los activos tienen el atributo id con la primera letra en mayúscula. Si existe, devuelve
6. Si aún no existe, vaya a la cadena del prototipo para encontrarlo, si no lo encuentra, se imprimirá una advertencia.
Principio de análisis de filtro
Pensemos en ello, ¿cómo analiza el analizador la sintaxis del filtro? De hecho, existe una función dentro de Vue para analizar la sintaxis del filtro:parseFilters
Su principio es analizar la lista de filtros y luego 循环过滤器列表fusionarla 拼接字符串.
- guion
filter：{
judgeRole(val) {
if (val === '0') {
return '平台'
} else if (val === '1') {
return '企业'
} else if (val === '2') {
return '企业用户'
} else {
return ''
}
}
}
ilustrar
- en la función de filtro
valueestá|el valor anterior, que equivale al primer parámetro - Se debe devolver un valor en la función de filtro, que es el resultado de nuestro procesamiento de formato.
- En términos sencillos, cuando un filtro está vinculado a un dato, llamará a la función del filtro correspondiente cada vez que se procesen los datos.
combate real
Use vue-cli para descargar un proyecto predeterminado. Yo uso vue/cli4el directorio predeterminado de la siguiente manera
1. componentsCree un nuevo filtro local debajo de la carpeta FilterLoc.vuey escriba el siguiente código. Nuestro propósito es cambiar la sunwukongprimera letra a mayúscula.
<template>
<div>{
{name | capitalize}}</div>
</template>
<script>
export default {
data(){
return {
name:'sunwukong'
}
},
filters:{
//当value改变的时候，他会执行这个函数
capitalize:function (value) {
//一定要返回一个值才能在组件中正常显示
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
}
</script>
2. App.vueLo introducimos y lo mapeamos en componentes.
<template>
<div><filter-loc></filter-loc></div>
</template>
<script>
import FilterLoc from '@/components/FilterLoc'
export default {
components:{
FilterLoc
}
}
</script>
3. Ejecute el proyecto y observe el efecto. sunwukongLa primera está en mayúscula.
2. Filtro global
1. Podemos definir filtros globales en el archivo de entrada, o en otros archivos, aquí cambiamos la última letra inicial a mayúscula.
- principal.js
/* 定义全局过滤器 */
Vue.filter('capitalize', function (value) {
if (!value) return ''
const length = value.length - 1
value = value.toString()
return value.slice(0,length) + value.charAt(length).toUpperCase()
})
2. componentsCree uno nuevo en la carpeta FilterGlo.vuepara usar el filtro global y escriba el siguiente código para usar el filtro directamente.
<template>
<div>{
{name | capitalize}}</div>
</template>
<script>
export default {
data(){
return {
name:'zhubajie'
}
}
}
</script>
3. App.vueLo introducimos y lo asignamos en componentes, ejecutamos el proyecto para observar el efecto.
Nota
4. De hecho, acabamos de definir dos idfiltros idénticos, pero descubrimos que el local no ha cambiado, por lo que descubrimos que la prioridad del filtro: el local tiene una prioridad más alta que el global;
3. Filtros en línea
gramática
<div>{
{ message | filterA | filterB }}</div>
- El parámetro recibido por el último filtro es el valor de retorno del parámetro anterior.
combate real
1. componentsCree uno nuevo debajo de la carpeta FilterSer.vuepara usar el filtro en serie y escriba el siguiente código para usar directamente el filtro global (la última letra está en mayúscula) y nuestro filtro personalizado (la primera letra está en mayúscula)
<template>
<div>{
{name|initalWord|capitalize}}</div>
</template>
<script>
export default {
data(){
return {
name:'shawujing'
}
},
filters:{
initalWord:function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
}
</script>
2. Lo App.vueintrodujimos y lo asignamos a componentes, ejecutamos el proyecto para observar el efecto y descubrimos que se utilizaron ambos selectores.
4. Filtrar parámetros
gramática
<div>{
{ message | filterA('arg1', arg2) }}</div>combate real
- Cree uno nuevo en
componentsla carpetaFilterParam.vuepara usar parámetros de filtro y escriba el siguiente código para definir un filtro y pasar los parámetros.
<template>
<div>{
{name|paramsFil('白骨精','白龙马')}}</div>
</template>
<script>
export default {
data(){
return {
name:'师徒四人'
}
},
filters:{
paramsFil:function (value,arg1,arg2) {
console.log(value,arg1,arg2)
return value + arg1 + arg2
}
}
}
</script>
Lo introdujimos App.vue, lo asignamos a componentes y ejecutamos el proyecto para observar el efecto con los parámetros requeridos.
- Los parámetros pasados son
filterA('arg1', arg2)los dos últimos parámetros del filtro.
Este filtro ya es muy completo y espero que sea de alguna ayuda para todos los colegas. Si responde esta pregunta sobre el filtro en la entrevista, ya es muy completo, porque incluye condiciones de peso espacial, condiciones multiparamétricas, y condiciones multifiltro, de forma integral. También les deseo a mis compañeros éxito en su trabajo y armonía en sus familias.