How to use vue custom filters

This time I will show you how to use vue custom filtersFilter, what are the precautions for using vue custom filters, the following is a practical case, let's go together take a look.

Officially given

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

View details

If we have multiple filters in the project, how can I register them at once and make them available globally? We create a new filter in the project folder, as follows, index.js is the export file, readMore is a filter that processes string

File directory

Paste the code below:

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

Then do the following processing in main.js:

main. js does global registration

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

and you can use it globally

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to use filter in vue

##How to use vue to determine the class of dom

The above is the detailed content of How to use vue custom filters. For more information, please follow other related articles on the PHP Chinese website!