Explication détaillée des étapes des filtres personnalisés vue

Cette fois je vous apporte une explication détaillée des étapes des filtres personnalisés vuefilter, quelles sont les précautions des filtres personnalisés vue, ce qui suit est un cas pratique, prenons un coup d'oeil une fois.

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 ? 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 :

Explication détaillée de la façon de compiler un projet Vue et de le déployer dans un répertoire racine autre qu'un site Web

Utilisez VuePress pour créer un blog personnel Étapes détaillées (avec code)

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!