Comment utiliser les filtres personnalisés vue

Cette fois, je vais vous montrer comment utiliser les filtres personnalisés vuefiltres, quelles sont les précautions d'utilisation des filtres personnalisés vue, voici des cas pratiques, regardons ensemble Jetez un oeil.

Officiellement donné

Vue.filters(id , [definition])
//id {string}
//definition {function}

Afficher les détails

Si nous avons plusieurs filtres dans le projet, comment puis-je les enregistrer en même temps et les rendre disponibles dans le monde entier ? Nous créons un ? nouveau dans le projet Un dossier de filtres, comme suit, index.js est le fichier d'exportation et readMore est un fichier de filtre

qui traite la

chaîne Collez le code sous le répertoire

 :

//index.js
// 引入所有的过滤函数
import readMore from './readMore';
// 导出在一个对象上
export default {
  readMore
};
//readMore.js
//查看更多文字显示'...'
let readMore = (text,length,suffix) => {
 if(text) {
  if(text.length <= length) return text;
  return text.substring(0,length) + suffix;
 }
 return text;
 };
export default readMore;

Effectuez ensuite le traitement suivant dans main.js :

Main.js est enregistré mondialement

//全局注册自定义的过滤器
import filters from './filters';
for(let key in filters){
 Vue.filter(key, (val,value1,value2) => {
 return filters[key](val,value1,value2);
 });
}

et il peut être utilisé mondialement

//在test.vue里面使用
  <p html="readMore(&#39;文字文字&#39; ,60,`...<font style=&#39;color:rgba(25,123,207,1);&#39;>全文</font>`)"></p>
<span>#<span class="add">{{'文字文字' | readMore(15,'...')}}</span>#</span>

Je crois que vous maîtrisez la méthode après avoir lu le cas Dans cet article, venez pour des informations plus intéressantes. Faites attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser le filtre dans vue

Comment utiliser vue pour déterminer la classe de dom

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!