在这里只简单探讨关于如何将vue过滤器封装到一个文件当中,当然可以封装多个不同类型的过滤器,然后可以在需要使用过滤器的文件当中进行复用,非常的方便。
<强> 1。
首先是文件结构,首先涉及到过滤器。vue(引用过滤器的文件)
文件代码:
& lt; template>
& lt; div类=昂Ｍ纪病北?
& lt; ul>
& lt;李v=拔谋驹谖谋尽痹趝{文本| MoneyFormat}} & lt;/li>
& lt;/ul>
& lt;/div>
& lt;/template>
& lt; script>
从“. ./过滤器/指数”进口过滤器
出口默认{
数据(){
返回{
文本:[“赫勒”,“自卫队”,“他妈的”)
};
},
};
& lt;/script>
然后是用来封装过滤器的文件过滤器下的index.js文件:
文件代码:
//vue定义全局过滤器//第一个过滤器:用来将单词的首字母变成大写
让MoneyFormat=value=https://www.yisu.com/zixun/> {
如果(值){
让str=value.toString ();//获取英文,以空格分组把字符串转为数组,遍历每一项,第一项转为大写字母
让newArr=str.split (" ")。地图(避署=比;{
console.log (ele.slice (1))
返回ele.charAt (0) .toUpperCase () + ele.slice (1)
});
newArr返回。加入(" ")
}
}//第二个过滤器:用来将字符串“22”添加到字母后面
让timeFilter=function(值){
返回值+“22”
}//暴露这两个过滤器
出口{MoneyFormat, timeFilter}
最后就是在main.js文件当中引入全局过滤器:
文件代码:
//全局过滤器
*作为过滤器从导入”。/过滤器/指数”
种(过滤器)。forEach(关键=比;{
Vue。过滤器(关键、过滤器(例子))
})
<强> 2。
最后附上文件结构图:
到此这篇关于vue将多个过滤器封装到一个文件中的文章就介绍到这了,更多相关vue过滤器封装文件中内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
