So verwenden Sie den Filter global

Dieses Mal zeige ich Ihnen, wie Sie Filter global verwenden und welche Vorsichtsmaßnahmen für die globale Verwendung von Filtern gelten. Hier ist ein praktischer Fall, werfen wir einen Blick darauf.

Offiziell bereitgestellt

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

Details anzeigen

Wenn wir mehrere Filter im Projekt haben, wie kann ich diese gleichzeitig registrieren und global verfügbar machen? im Projekt Der Ordner lautet wie folgt: index.js ist die Exportdatei und readMore ist ein Filter

, der

Dateiverzeichnis

//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;

Main.js führt eine globale Registrierung durch

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

//在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>

Was tun, wenn sich das eigentliche Projekt nach der Kompilierung nicht im Stammverzeichnis befindet?

Anleitung Holen Sie sich den Wert der Klasse im Dom

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Filter global. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!