L'utilisation de filtres dans Vue
Réfléchissons à la raison pour laquelle il existe un filtre alors qu'il existe des méthodes, car l'efficacité de mise en œuvre du filtre est bien supérieure à celle des méthodes.
Jetez un œil à la définition officielle :
Vue.js vous permet de personnaliser des filtres qui peuvent être utilisés pour certains formats de texte courants. Les filtres peuvent être utilisés à deux endroits : interpolation à double accolade et expressions v-bind (cette dernière est prise en charge à partir de la version 2.1.0+). Des filtres doivent être ajoutés à la fin de l'expression JavaScript, indiqués par le symbole « pipe » :
1. Filtre local (le plus fréquemment utilisé)
grammaire
- modèle
<div>{
{ name | judgeRole }}</div>
//或者
<div v-bind:id="rawId | formatId"></div>
Après une opération, le filtre ci-dessus deviendra : _s(_f("capitalize")(message)).
_f : Cette fonction est en fait un alias de solveFilter. Sa fonction est de trouver le filtre à partir de _this.$options.filter et de le renvoyer. _s
: Cette fonction est un alias de la fonction toString. Sa fonction est d'obtenir le résultat filtré et transmettez-le à la fonction toString(). , le résultat sera enregistré dans l'attribut text du VNode et le résultat sera renvoyé pour restituer directement la vue.
Le principe de la fonction _f
La fonction _f recherche en fait le filtre. Si le filtre est trouvé, elle renvoie le filtre. S'il n'est pas trouvé, elle renvoie la même valeur que le paramètre. Son code est en fait très simple :
import {identity, resolveAssets} from 'core/util/index'
export function resolveFilter(id){
return resolveAssets(this.$options, 'filters', id, true) || identity
}
Concentrons-nous sur ce que fait solveAssets.
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
}
En fait, son processus de recherche est également très simple, effectuant principalement les opérations suivantes (l'id est l'identifiant du filtre) :
1. Déterminez si l'identifiant du filtre est une chaîne, sinon, terminez-le.
2. Utilisez des actifs pour stocker le filtre. 3.
La fonction hasOwn vérifie si les actifs eux-mêmes ont un attribut id. Si c'est le cas, elle renvoie.
4. L'attribut La fonction hasOwn vérifie si les actifs eux-mêmes ont un identifiant camel-case. Attribut, s'il existe, il renvoie
5. La fonction hasOwn vérifie si les actifs eux-mêmes ont l'attribut id avec la première lettre en majuscule. S'il existe, il renvoie
6. S'il n'existe toujours pas, rendez-vous sur la chaîne de prototypes pour le trouver. S'il ne le trouve pas, un avertissement sera imprimé.
Principe d'analyse du filtre
Pensons-y, comment l'analyseur analyse-t-il la syntaxe du filtre ? En fait, il existe une telle fonction dans Vue pour analyser la syntaxe du filtre :parseFilters
Son principe est d'analyser la liste de filtres puis 循环过滤器列表
de la fusionner 拼接字符串
.
- scénario
filter:{
judgeRole(val) {
if (val === '0') {
return '平台'
} else if (val === '1') {
return '企业'
} else if (val === '2') {
return '企业用户'
} else {
return ''
}
}
}
illustrer
- dans la fonction filtre
value
se trouve|
la valeur précédente, qui équivaut au premier paramètre - Une valeur doit être renvoyée dans la fonction filtre, qui est le résultat de notre traitement de format
- En termes simples, lorsqu'un filtre est lié à un élément de données, il appellera la fonction du filtre correspondant à chaque fois que les données sont restituées.
Combat réel
Utilisez vue-cli pour télécharger un projet par défaut. J'utilise vue/cli4
le répertoire par défaut comme suit
1. components
Créez un nouveau filtre local sous le dossier FilterLoc.vue
et écrivez le code suivant. Notre objectif est de changer la sunwukong
première lettre en majuscule
<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. Nous App.vue
l'introduisons et le mappons en composants
<template>
<div><filter-loc></filter-loc></div>
</template>
<script>
import FilterLoc from '@/components/FilterLoc'
export default {
components:{
FilterLoc
}
}
</script>
3. Exécutez le projet et observez l'effet. sunwukong
La première a été en majuscule.
2. Filtre global
1. Nous pouvons définir des filtres globaux dans le fichier d'entrée, ou dans d'autres fichiers. Ici, nous changeons la dernière lettre initiale en majuscule.
- main.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. components
Créez-en un nouveau sous le dossier FilterGlo.vue
pour utiliser le filtre global et écrivez le code suivant pour utiliser directement le filtre.
<template>
<div>{
{name | capitalize}}</div>
</template>
<script>
export default {
data(){
return {
name:'zhubajie'
}
}
}
</script>
3. Nous App.vue
l'introduisons et le cartographions en composants, exécutons le projet pour observer l'effet
Note
4. En fait, nous venons de définir deux id
filtres identiques, mais nous avons constaté que le local n'a pas changé, nous avons donc découvert que la priorité du filtre : le local a une priorité plus élevée que le global ;
3. Filtres en ligne
grammaire
<div>{
{ message | filterA | filterB }}</div>
- Le paramètre reçu par ce dernier filtre est la valeur de retour du paramètre précédent.
Combat réel
1. components
Créez-en un nouveau sous le dossier FilterSer.vue
pour utiliser le filtre série, et écrivez le code suivant pour utiliser directement le filtre global (la dernière lettre est en majuscule) et notre filtre personnalisé (la première lettre est en majuscule)
<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. Nous App.vue
l'avons introduit et cartographié en composants, exécuté le projet pour observer l'effet et constaté que les deux sélecteurs étaient utilisés.
4. Paramètres de filtre
grammaire
<div>{
{ message | filterA('arg1', arg2) }}</div>
Combat réel
- Créez-en un nouveau sous
components
le dossierFilterParam.vue
pour utiliser les paramètres de filtre et écrivez le code suivant pour définir un filtre et transmettre les paramètres.
<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>
Nous App.vue
l'avons introduit et cartographié en composants, et avons exécuté le projet pour observer l'effet avec les paramètres requis.
- Les paramètres transmis sont
filterA('arg1', arg2)
les deux derniers paramètres du filtre.
Ce filtre est déjà très complet, et j'espère qu'il sera d'une certaine aide à tous les collègues. Si vous répondez à cette question sur le filtre dans l'interview, il est déjà très complet, car il inclut des conditions de poids spatial, des conditions multiparamétriques, et des conditions multi-filtres, de manière globale. Je souhaite également à mes collègues du succès dans leur travail et de l'harmonie au sein de leurs familles.