Heim > Web-Frontend > js-Tutorial > So verwenden Sie benutzerdefinierte Vue-Filter

So verwenden Sie benutzerdefinierte Vue-Filter

php中世界最好的语言
Freigeben: 2018-06-02 10:17:11
Original
1660 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie benutzerdefinierte Vue-Filter verwenden Schauen Sie mal rein. Offiziell bereitgestellt

Details anzeigen

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

Zeichenfolge

Dateiverzeichnis

Fügen Sie den folgenden Code ein:

//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;
Nach dem Login kopieren
Führen Sie dann die folgende Verarbeitung in main.js durch:

main. js führt eine globale Registrierung durch

//全局注册自定义的过滤器
import filters from &#39;./filters&#39;;
for(let key in filters){
 Vue.filter(key, (val,value1,value2) => {
 return filters[key](val,value1,value2);
 });
}
Nach dem Login kopieren
und Sie können es global verwenden

//在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>
Nach dem Login kopieren
Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen erhalten Sie zu anderen verwandten Artikeln auf der chinesischen PHP-Website! Empfohlene Lektüre:

So verwenden Sie den Filter in Vue

So verwenden Sie Vue, um die Klasse von Dom zu bestimmen

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage